How to use Two Y Axes in Chart.js ?
In Chart.Js, while representing the complex and multi-datasets in visual form, we always need to use two or more Y-axes to show the data. So we can use two Y-axes in ChartJS by using various approaches. In this article, we will see these approaches to make the Chart with dual Y-axis.
Table of Content
- Using the yAxisID Option
- Using Datasets Array for Each Axis
Approach 1: Using the yAxisID Option
In this approach, we are using the yAxisID option to link each dataset with a specific Y-axis in Chart.js. By defining the separate scales as “first” and “second“, both have separate styling and position. By using this, we can show the data in two Y-axes in left and right positions.
Syntax:
datasets: [
{
yAxisID: 'yourAxisID',
label: 'Dataset Label',
data: data
},
],
Example: Below is the implementation of the above-discussed approach.
HTML
<!DOCTYPE html> < html > < head > < title >Example 1</ title > < script src = "https://cdn.jsdelivr.net/npm/chart.js" > </ script > </ head > < body > < h1 style = "color: green;" > w3wiki </ h1 > < h3 > Approach 1: Using yAxisID Option </ h3 > < canvas id = "chart1" ></ canvas > < script > const ctx = document. getElementById('chart1'). getContext('2d'); const chart1 = new Chart(ctx, { type: 'line', data: { labels: ['Jan', 'Feb', 'March', 'April'], datasets: [ { yAxisID: 'first', label: 'Programming Category Views', data: [4321, 6531, 1111, 4444], borderWidth: 1, backgroundColor: 'blue', borderColor: 'blue' }, { yAxisID: 'second', label: 'Courses Growth', data: [11, 13, 15, 17], backgroundColor: 'green', borderColor: 'green' } ] }, options: { responsive: true, scales: { first: { type: 'linear', position: 'left', ticks: { beginAtZero: true, color: 'red' }, grid: { display: false } }, second: { type: 'linear', position: 'right', ticks: { beginAtZero: true, color: 'green' }, grid: { display: false } }, x: { ticks: { beginAtZero: true } } } } }); </ script > </ body > </ html > |
Output:
Approach 2: Using Datasets Array for Each Axis
In this approach, we are creating the Bar chart with two datasets, where each dataset is lined with a separate y-axis as y-axis-1 and y-axis-2. The scales property in the options mainly configures two linear y-axis positions.
Syntax:
options: {
scales: {
yAxes: [
{
// left y-axis
},
},
{
// right y-axis
},
},
],
},
}
Example: Below is the implementation of the above-discussed approach.
HTML
<!DOCTYPE html> < html > < head > < title >Example 2</ title > < script src = "https://cdn.jsdelivr.net/npm/chart.js" > </ script > </ head > < body > < center > < h1 style = "color: green;" > w3wiki </ h1 > < h3 > Approach 2: Using datasets Array for Each Axis </ h3 > < canvas id = "chart2" width = "400" height = "200" > </ canvas > </ center > < script > const data = { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], datasets: [ { label: 'Page Views', data: [500, 600, 800, 700, 900], yAxisID: 'y-axis-1', backgroundColor: 'rgba(75, 192, 192, 0.2)', borderColor: 'rgba(75, 192, 192, 1)', borderWidth: 1 }, { label: 'Users', data: [30, 70, 50, 80, 60], yAxisID: 'y-axis-2', backgroundColor: 'rgba(255, 99, 132, 0.2)', borderColor: 'rgba(255, 99, 132, 1)', borderWidth: 1 } ] }; const config = { type: 'bar', data: data, options: { scales: { yAxes: [ { type: 'linear', position: 'left', id: 'y-axis-1', }, { type: 'linear', position: 'right', id: 'y-axis-2', }, ] } } }; const chart2 = new Chart( document.getElementById('chart2'), config); </ script > </ body > </ html > |