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.
Here are some of the benefits of using Chart.js:
- It is free and open-source.
- It is easy to use.
- It has a wide range of features.
- It is highly customizable.
- It is well-documented.
- It is actively maintained.
- It has a large community of users and developers.
If you are looking for a powerful and easy-to-use JavaScript library for creating interactive charts, then Chart.js is a great option.
Here are some examples of charts that can be created with Chart.js:
- Bar charts are used to show comparisons between different values.
- Line charts are used to show trends over time.
- Area charts are used to show the cumulative sum of values over time.
- Pie charts are used to show the relative sizes of different parts of a whole.
- Bubble charts are used to show the relationship between two variables, with the size of the bubble representing a third variable.
- Radar charts are used to show the performance of different entities on multiple dimensions.
- Polar charts are used to show the relationship between two variables, with the angle of the data point representing one variable and the length of the data point representing the other variable.
- Scatter charts are used to show the relationship between two variables without any particular emphasis on one variable over the other.
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.
Hope this code and post will helped you for implement Create a Chart with 2 Y Axes in ChartJS – onlinecode. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs