How to useyAxes Option in Chart.js
- In this approach, we are using the yAxes option in Chart.js which configures the scale property to include the yAxes array.
- By using this array, the scaleLabel property is used to set the Y-axis title.
- We have given the title “Number of Visitors“.
- This option is mainly used with Chart.js Version 2.
Syntax:
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Y-axis Title'
}
}]
}
Example: Below is the implementation of the above-discussed approach.
HTML
<!DOCTYPE html><html><head> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"> </script> <title>Example 2</title></head><body> <h1 style="color:green;">w3wiki</h1> <h3>Approach 2: Using yAxes Option </h3> <canvas id="myChart" width="400" height="200"></canvas> <script> let ctx = document.getElementById('myChart').getContext('2d'); let myChart = new Chart(ctx, { type: 'bar', data: { labels: ['January', 'February', 'March', 'April', 'May'], datasets: [{ label: 'w3wiki Data', data: [12, 19, 3, 5, 2], backgroundColor: 'rgba(75, 192, 192, 0.2)', borderColor: 'rgba(75, 192, 192, 1)', borderWidth: 1 }] }, options: { scales: { yAxes: [{ scaleLabel: { display: true, labelString: 'Number of Views' } }] }, legend: { display: true, position: 'top' } } }); </script></body></html> |
Output:
How to Set Chart.js Y-axis Title ?
Chart.js is the JavaScript library to represent the data in visual forms in terms of various charts like Bar, Pies, etc. We can set and customize the axes of the chart by setting the Y-axis title. This provides better information about the vertical axis of the Chart. In this article, we will see how we can set the Chart.js Y-axis title by using two different approaches.
Below are the possible approaches:
Table of Content
- Using Chart.js Global Options
- Using yAxes Option
Contact Us