Create a Chart with 2 Y Axes in ChartJS – onlinecode

onlinecode

2 years ago

Create a Chart with 2 Y Axes in ChartJS

In this post, we will give you information about Create a Chart with 2 Y Axes in ChartJS. Here we will give you detail about Create a Chart with 2 Y Axes in ChartJS And how to use it also give you a demo for it if it is necessary.

To add more axes to a chart, you must specify the yAxisID option in the datas.datasets property, and configure the corresponding axes in the options.scales property.
For example, the below chart has two Y axes.
Axis A displays page views, axis B displays revenue.
Page views is usually much larger than revenue, but the below chart renders side by side on the same chart.

const ctx = document.getElementById('chart').getContext('2d');

const chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Friday', 'Saturday', 'Sunday', 'Monday'],
    datasets: [
      {
        yAxisID: 'A', // <-- the Y axis to use for this data set
        label: 'Page Views',
        data: [13500, 5700, 6300, 8200],
        borderWidth: 1,
        backgroundColor: 'blue',
        borderColor: 'blue'
      },
      {
        yAxisID: 'B', // <-- the Y axis to use for this data set
        label: 'Revenue',
        data: [11, 3.6, 7.3, 8.1],
        backgroundColor: 'green',
        borderColor: 'green'
      }
    ]
  },
  options: {
    responsive: true,
    scales: {
      A: {
        type: 'linear',
        position: 'left',
        ticks: { beginAtZero: true, color: 'blue' },
        // Hide grid lines, otherwise you have separate grid lines for the 2 y axes
        grid: { display: false }
      },
      B: {
        type: 'linear',
        position: 'right',
        ticks: { beginAtZero: true, color: 'green' },
        grid: { display: false }
      },
      x: { ticks: { beginAtZero: true } }
    }
  }
});

Chart.js is a free, open-source JavaScript library for creating interactive charts. It is used by millions of developers worldwide to create beautiful and informative charts for their websites and applications.

Chart.js is easy to use and has a wide range of features, including:

Support for eight chart types: bar, line, area, pie, bubble, radar, polar, and scatter
Highly customizable options for colors, fonts, and styles
Ability to add annotations, tooltips, and other interactive elements
Support for zooming and panning
Integration with popular frameworks like React and Angular

Chart.js is a powerful tool that can be used to create a wide variety of charts. It is a great choice for developers who want to create beautiful and informative charts for their websites and applications.