How to use display: false property In Chart.js
In this approach, we set the display property to ‘false’ for the X-axis inside the scales object of the options object.
Syntax:
scales: {
x: {
display: false // Hides labels and chart lines of the x-axis
}
}
//OR
scales: {
x: {
ticks:{
display: false // Hides only the labels of the x-axis
}
}
}
Example: The below code example uses the display: false property to hide the x-axis labels in chart.js.
HTML
<!DOCTYPE html> < html > < head > < title > Chart.js Display: None </ title > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js" > </ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js" > </ script > </ head > < body > < center > < div > < h1 style = "color:green;" > w3wiki </ h1 > < h3 > Chart.js Line Chart with Hidden X-Axis Labels (Display: None) </ h3 > < div > < canvas id = "lineChartID-display-none" > </ canvas > </ div > </ div > </ center > < script > new Chart($("#lineChartID-display-none"), { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'My Dataset', data: [65, 71, 62, 81, 34, 55, 47], borderColor: 'green', fill: false, tension: 0.1 }] }, options: { scales: { x: { // ticks:{ // display: false // } display: false }, y: { beginAtZero: true } } } }); </ script > </ body > </ html > |
Output:
How to Hide the X-Axis Label/text that is Displayed in Chart.js ?
Chart.js is a popular JavaScript library for creating interactive and visually appealing charts and graphs. By default, Chart.js displays text labels for both the x and y axes but in this article, we will see the different approaches to hiding the x-axis label/text that is displayed in chart.js.
Chart.js CDN Link
To use Chart.js you have to include the below CDN link in your HTML.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>