Chart.js Axes

Last Updated : 28 Apr, 2025

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:

Screenshot-2023-12-07-170710

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:

Screenshot-2023-12-07-173611

Chart.js Radial Axes

iamgaurav

Improve

Article Tags :

Chart.js Axes

Types of Axes

Similar Reads

Chart.js General

Chart.js Configuration

Chart.js Chart Types

Chart.js Axes

Chart.js Developers

Chart.js Questions

Thank You!

What kind of Experience do you want to share?