Chart js remove labels
- Published
- Reading time
- 5 min read
- Length
- 832 words
On this page
Chart.js: Remove Labels#
Chart.js is a popular JavaScript library used to create beautiful charts and graphs on web pages. Sometimes, you may want to remove the labels from your chart to create a more minimalist look or to improve performance. Here are a few ways to do it:
Option 1: Set Label Options to False#
The easiest way to remove labels from your Chart.js chart is to set the label options to false. This will remove all labels, including the x-axis and y-axis labels, as well as any data point labels. Here's an example:
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
scaleLabel: {
display: false,
labelString: 'Value'
}
}],
xAxes: [{
scaleLabel: {
display: false,
labelString: 'Color'
}
}]
},
legend: {
display: false
}
}
});In this example, we set the display options for the x-axis and y-axis labels to false in the scales options, and we set the display option for the legend to false in the legend options. This will remove all labels from the chart.
Option 2: Remove Specific Labels#
If you only want to remove certain labels from your chart, you can do so by modifying the labels array in your data object. Here's an example:
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: 'Value'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Color'
}
}]
},
legend: {
display: true
}
}
});
// Remove the first and last labels
myChart.data.labels.shift();
myChart.data.labels.pop();
myChart.update();In this example, we remove the first and last labels from the labels array by using the shift() and pop() methods. We then call the update() method to redraw the chart without the removed labels.
Option 3: Use a Plugin#
If you want more control over how labels are removed from your Chart.js chart, you can use a plugin. There are several plugins available that allow you to customize label behavior in various ways. Here's an example using the chartjs-plugin-labels plugin:
Chart.plugins.register({
afterDatasetsDraw: function(chartInstance, easing) {
// To only draw at the end of animation, check for easing === 1
var ctx = chartInstance.chart.ctx;
chartInstance.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.getDatasetMeta(i);
if (!meta.hidden) {
meta.data.forEach(function(element, index) {
// Draw the text in black, with the specified font
ctx.fillStyle = 'rgb(0, 0, 0)';
var fontSize = 16;
var fontStyle = 'normal';
var fontFamily = 'Helvetica Neue';
ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
// Just naively convert to string for now
var dataString = dataset.data[index].toString();
// Make sure alignment settings are correct
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
var padding = 5;
var position = element.tooltipPosition();
ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
});
}
});
}
});
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
}
});In this example, we register a plugin that draws data point labels at the tooltips using the afterDatasetsDraw hook. We customize the font and positioning of the labels to create a unique look. Note that this plugin only removes the data point labels and not the x-axis or y-axis labels.
Conclusion#
Removing labels from your Chart.js chart can improve performance and create a more minimalist look. You can remove all labels by setting the display options to false in the options object, remove specific labels by modifying the labels array in your data object, or use a plugin to customize label behavior. Choose the method that works best for your needs and preferences.