How to set up two Y-axes in Chart.js

Klook.com
Post Views: 154

What happend

While I was practicing Chart.js in my Python Flask project, I aimed to create a chart that can display multiple Y-axes. ( Each dataset should have its own corresponding Y-axis. )

Let us see the example before setting

    var data1 = [10, 20, 30, 40, 50, 60, 70];
    var data2 = [10, 2, 3, 8, 5, 6, 7];

    myChart = new Chart(ctx,
    {
        type: 'line',
        data:
        {
            labels: [1,2,3,4,5,6,7],
            datasets: [
            {
                //label: 'DataSet1',
                data: data1,
                borderColor: 'blue',
                fill: false,
            },
            {
                //label: 'DataSet2',
                data: data2,
                borderColor: 'red',
                borderDash: [5, 5], // dotted line
                fill: false,
            }]
        },

We can see there are two datasets with different values.

⬇ And this is what it will look like

If the two datasets have a small difference, it’s manageable.

However, if there’s a significant disparity between them, or they aren’t even in the same unit, yet you still want to display them together, that’s where the need for two Y-axes arises to solve this issue!

Now, let’s see how we solve this issue.

We need to set the options – scales for the chart

var data1 = [10, 20, 30, 40, 50, 60, 70];
    var data2 = [10, 2, 3, 8, 5, 6, 7];

    myChart = new Chart(ctx,
    {
        type: 'line',
        data:
        {
            labels: [1,2,3,4,5,6,7],
            datasets: [
            {
                //label: 'DataSet1',
                data: data1,
                borderColor: 'blue',
                fill: false,
				yAxisID: 'y1'
            },
            {
                //label: 'DataSet2',
                data: data2,
                borderColor: 'red',
                borderDash: [5, 5], // dotted line
                fill: false,
				yAxisID: 'y2'
            }]
        },
        options:
        {
            scales:
            {
                y1:
                {
                    type: 'linear',
                    display: true,
                    position: 'left',
                },
                y2:
                {
                    type: 'linear',
                    display: true,
                    position: 'right',

                    grid:
                    {
                        drawOnChartArea: false 
                    }
                },
            }
        }
    });

In the options section, you can see that we’ve defined two custom scales.

We’ve specified type: linear for a straight line, display to show the axis, and position to place them – one on the left and one on the right.

Then, in the dataset section, you need to associate each dataset with the desired coordinate by setting the yAxisID.

And that will make the chart look like⬇

Conclusion

Chart.js indeed offers a high degree of flexibility for creating custom charts, but this also steepens the learning curve.

I’m also in the process of learning, and I hope to share more practical tips and tutorials with everyone in the future.

🧡 Hopefully, this post has helped you to some extent.

🧡You can support me by clicking some ad, Thanks a lot

✅If you got any problem about the explanation, please feel free to let me know

Some Random notes

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *