Chart.js Axes
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 = "https://cdn.jsdelivr.net/npm/chart.js" > </ 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 = "https://cdn.jsdelivr.net/npm/chart.js" > </ 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: