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