How to useChart.js Global Options in Chart.js
- In this approach, we are using the options object which is from Chart.js Global.
- There is a scale configuration in which we can customize the y-axis by setting its title.
- For the below example, we have set the title as “More Popular” which is displayed on the y-axis of the Bar chart.
Syntax:
const options = {
scales: {
y: {
title: {
display: true,
text: 'Title'
}
}
}
};
Example: Below is the implementation of the above-discussed approach.
HTML
<!DOCTYPE html><html lang="en"><head> <title>Example 1</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"> </script></head><body> <div> <h1 style="color:green;">w3wiki</h1> <h3>Approach 1: Using Chart.js Global Options </h3> <div style="width:90%;"> <canvas id="chart1"></canvas> </div> </div> <script> const data = { labels: ['JavaScript', 'Python', 'Java', 'C#', 'C++'], datasets: [{ label: 'Popularity', data: [70, 60, 50, 40, 30], backgroundColor: 'rgba(255,0,0)', borderColor: 'rgba(11,156,49)', borderWidth: 1 }] }; const options = { scales: { y: { title: { display: true, text: 'More Popular' } } } }; const ctx = document.getElementById('chart1').getContext('2d'); const chart1 = new Chart(ctx, { type: 'bar', data: data, options: options }); </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