Chart.js Axes provides the necessary context, labels, and scaling to make the charts more informative so that they can look visually appealing. Axes can be applied on various types of charts like lines, bars, radar, etc.
Types of Axes
- Axes: It is an integral part of Chart.js and it is used to determine the pixel value of the chart. There can be one or more X-axis and Y-axis. It provides the common and trick configuration for axes.
- Cartesian Axes: It can be of many types and each type specifies the need of the value according to its name. For e.g. Category axis provides a label category to label the name of each point on the chart or graph.
- Radial Axes: These are used mainly for the polar area, radar, and bubble charts. The Radial Axis are circular axis that runs around the boundaries of the chart, which shows the different kinds of data points at various distances from the center of the chart.
- Labeling Axes: It is mainly used to make the charts more readable and informative. It provides various options to customize the labels of both X and Y axes, as well as other types of axes as we know for example radial axes. It is quite essential for providing information effectively to the viewer.
- Styling: As the name suggests we have some options here to style the axes so that they can look good, rather than a boring chart. It allows us to customize the look of the grid lines, ticks, and borders or the chart.
Example 1: Here in this example, we have configured the title for the y-axis to display the text Revenue (in $) in the green color, and the line on the chart will also be in the green color.
HTML
<!DOCTYPE html><html>
<head>
<title>Line Chart with Custom Y-Axis Title</title>
<!-- Include Chart.js library -->
<script src=
</script>
</head>
<body>
<div style="width: 80%; margin: auto;">
<!-- Create a canvas element to render the chart -->
<canvas id="myLineChart"></canvas>
</div>
<script>
// Sample data for the chart
const data = {
labels: ['January', 'February',
'March', 'April', 'May'],
datasets: [{
label: 'Monthly Revenue',
data: [1500, 2200, 1800, 2400, 2000],
borderColor: 'green',
fill: false
}]
};
// Get the canvas element
const ctx = document.
getElementById('myLineChart').getContext('2d');
// Create the chart
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
y: {
title: {
display: true,
text: 'Revenue (in $)',
align: 'center',
color: 'green',
font: {
size: 14,
family: 'Arial',
style: 'italic'
},
padding: 10
}
}
}
}
});
</script>
</body>
</html>
|
Output:
Example 2: Here in this example, we will use the some options, like we wil make the chart circular.
HTML
<!DOCTYPE html><html>
<head>
<title>Radar Chart with
Circular Grid Lines</title>
<!-- Include Chart.js library -->
<script src=
</script>
</head>
<body>
<div style="width: 80%; margin: auto;">
<!-- Create a canvas
element to render the radar chart -->
<canvas id="myRadarChart"></canvas>
</div>
<script>
// Sample data for the radar chart
const data = {
labels: ['Sales', 'Marketing',
'Development', 'Design', 'Support'],
datasets: [{
label: 'Team Skills',
data: [80, 70, 90, 60, 75],
// Area fill color
backgroundColor: 'rgba(75, 192, 192, 0.7)',
// Border color
borderColor: 'rgba(75, 192, 192, 1)',
// Border width
borderWidth: 2,
}]
};
// Get the canvas element
const ctx = document.getElementById('myRadarChart')
.getContext('2d');
// Create the radar chart
// with circular grid lines
const chart = new Chart(ctx, {
type: 'radar',
data: data,
options: {
scales: {
r: {
grid: {
// Set grid lines to be circular
circular: true,
// Set grid line color
color: 'rgba(0, 0, 255, 0.2)',
// Show grid lines
display: true,
// Do not draw lines beside the ticks
drawTicks: false,
// Set grid line width
lineWidth: 2,
// Set grid line length
// into the axis area
tickLength: 10,
}
}
},
elements: {
line: {
// Line curve tension
tension: 0.4,
}
},
plugins: {
legend: {
// Show legend
display: true,
// Legend position
position: 'top',
}
}
}
});
</script>
</body>
</html>
|
Output:
Recommended Articles