Axes play a crucial role in Chart.js, providing context, labels, and scaling to enhance the informativeness and visual appeal of the charts. Axes apply to various types of charts, including line charts, bar charts, radar charts, and more.
Types of Axes
-
Cartesian axes: Cartesian axes are the traditional x and y axes commonly used in line charts, bar charts, and other types of charts where data is represented on a two-dimensional plane. It can be of many types and each type specifies the need of the value according to its name.
- Linear: The linear axis is the most common type of Cartesian axis. It is suitable for representing numerical data along a continuous scale.
- Logarithmic: The logarithmic axis is useful when dealing with datasets that cover a wide range of values, including orders of magnitude.
- Category: The category axis is suitable for categorical data, where each data point is associated with a distinct category or label.
- Time and Timeseries: Time and time-series axes are designed for handling temporal data. They are suitable for line charts where the X-axis represents time-related information.
-
Radial Axes: Radial axes are used in polar areas, radar, and bubble charts. These axes are circular and run around the boundaries of the chart. Radial axes display different kinds of data points at various distances from the center of the chart. For Example: In a radar chart, each spoke of the radar represents a different category or variable.
- Linear Radial Axis: It deals with the numeric data used in the radial chart. Also, it provides many configuration options for the chart.
- Labeling Axes: Labeling axes is crucial for making charts more readable and informative. Chart.js provides various options for customizing labels on both the x and y axes, as well as other types of axes like radial axes. It has configuration options like, title, labels, ticks, grid lines.
- Styling: Styling options in Chart.js allow customization of the visual appearance of axes, making the chart more visually appealing. we can change styling of ticks, axis line, grid lines e.t.c.
Syntax:
const config = {
type: 'chart type',
data: data,
options: {
scales: {
x: {
'component': {
//configuration you want
},
},
y: {
'component': {
//configuration you want
},
},
},
},
};
Example 1: In this example, we are creating a linear (numeric) x-axis, with grid lines.
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Chart.js Line Chart with Linear X-axis</title>
<style>
</style>
</head>
<body>
<div style="width:80%;">
<canvas id="myChart"></canvas>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const data = {
datasets: [{
label: 'Monthly Sales',
data: [
{ x: 1, y: 50 },
{ x: 2, y: 75 },
{ x: 3, y: 120 },
{ x: 4, y: 90 },
{ x: 5, y: 100 },
],
borderColor: 'purple',
borderWidth: 2,
fill: false,
}],
};
const config = {
type: 'line',
data: data,
options: {
plugins: {
legend: {
display: false,
},
},
elements: {
line: {
tension: 0,
},
},
scales: {
x: {
type: 'linear',
position: 'bottom',
grid: {
color: 'red',
borderColor: 'blue',
tickColor: 'grey'
},
},
y: {
// You can customize the y-axis if needed
},
},
},
};
const chart = new Chart(document.getElementById('myChart'), config);
});
</script>
</body>
</html>
|
Output:
Example 2: we have to create a line chart. The chart displays dynamic data with customized axes titles and styles. The X-axis represents categories, and the Y-axis starts at zero.
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Chart.js Line Chart with Customized Category Axes</title>
<style>
</style>
</head>
<body>
<div style="width:80%;">
<canvas id="myChart"></canvas>
</div>
<script>
document.addEventListener('DOMContentLoaded',
function () {
const data = {
labels: ['Category 1', 'Category 2', 'Category 3',
'Category 4', 'Category 5'],
datasets: [{
label: 'Dynamic Data',
data: [50, 75, 120, 90, 100],
borderColor: 'purple',
borderWidth: 2,
fill: false,
}],
};
const config = {
type: 'line',
data: data,
options: {
plugins: {
legend: {
display: false,
},
},
elements: {
line: {
tension: 0,
},
},
scales: {
x: {
type: 'category',
title: {
display: true,
text: 'Category X-Axis',
color: 'red', // Customize title color
},
},
y: {
beginAtZero: true,
},
},
},
};
const chart = new Chart(document
.getElementById('myChart'), config);
});
</script>
</body>
</html>
|
Output: