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
CDN link
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>Approach 1: Using the Y-axis display option
- In this approach, we hide the y-axis line by setting the display option as falses for the Y-axis in the scale configuration.
- In the example, we can see that, we can view the X-axis line only, the Y-axis line is hidden in the chart.
Syntax:
let options = {
scales: {
y: {
display: false
}
}
};
Example: Below is the implementation of the above-discussed approach.
HTML
<!DOCTYPE html><html>
<head>
<title>Example 1</title>
<script src=
</script>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>Approach 1: Using Y-axis display option</h3>
<canvas id="myChart" width="400" height="200"></canvas>
<script>
let data = {
labels: ["JS", "Python", "C++", "HTML", "ReactJS"],
datasets: [{
label: 'Programming Languages',
data: [50, 70, 45, 80, 60],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
};
let options = {
scales: {
y: {
display: false
}
}
};
let ctx = document.getElementById('myChart').getContext('2d');
let myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
</script>
</body>
</html>
|
Output:
Approach 2: Using ticks option
- 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=
</script>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</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: 'GeeksforGeeks 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: