How to useticks option in JavaScript
- In this approach, we hide the Y-axis line using the ticks option. We have specified the value of display as true in icks option.
- The ticks option manages the axis ticks on the Chart. For the Y-axis we have hidden the axis line.
Syntax:
let options = {
scales: {
y: {
beginAtZero: true,
ticks: {
display: false,
}
}
}
};
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> <h1 style="color: green;">w3wiki</h1> <h3>Approach 2: Using ticks option</h3> <canvas id="myChart" width="400" height="200"></canvas> <script> document.addEventListener('DOMContentLoaded', function () { let ctx = document.getElementById('myChart').getContext('2d'); let data = { labels: ['January', 'February', 'March', 'April', 'May'], datasets: [{ label: 'w3wiki Data', data: [12, 19, 3, 5, 2], fill: false, borderColor: 'rgba(75, 192, 192, 1)', borderWidth: 2 }] }; let options = { scales: { y: { beginAtZero: true, ticks: { display: false, } } } }; let myChart = new Chart(ctx, { type: 'line', data: data, options: options }); }); </script></body></html> |
Output:
How to Hide y Axis Line in ChartJs ?
In Chart.JS we can display our information in visual forms. For the customization of the chart, we can remove or hide the Y-axis line from the Chart appearance as per the requirement. We can use two different approaches to hide the y-axis line in the Chart.JS. We will see the practical implementation of these approaches in terms of examples and outputs.
Below are the possible approaches:
Table of Content
- Using the Y-axis display option
- Using ticks option
Contact Us