Chart.js Data Labels — Displaying Values on Chart Elements
In this tutorial, you will learn about Chart.js Data Labels. We cover key concepts, practical examples, and best practices to help you master this topic.
Chart.js data labels plugin displays values directly on chart elements using the chartjs-plugin-datalabels package with full formatting and positioning control.
What You'll Learn
By the end of this guide, you will install and configure the data labels plugin, format labels with callbacks, control label positioning per dataset, handle overlapping labels, and apply conditional styling.
Basic Data Labels
// Install: npm install chartjs-plugin-datalabels
import DataLabels from 'chartjs-plugin-datalabels';
Chart.register(DataLabels);
options: {
plugins: {
datalabels: {
color: '#333',
font: { weight: 'bold', size: 11 },
anchor: 'end',
align: 'top',
offset: 4
}
}
}
Label Callbacks
options: {
plugins: {
datalabels: {
formatter: function(value, context) {
var total = context.dataset.data.reduce(function(a, b) { return a + b; });
var pct = Math.round(value / total * 100);
return value + ' (' + pct + '%)';
},
color: function(context) {
return context.dataset.backgroundColor;
}
}
}
}
Per-Dataset Labels
datasets: [{
label: 'Revenue',
data: [30, 45, 40],
datalabels: {
anchor: 'end',
align: 'top',
color: '#4ecdc4'
}
}, {
label: 'Cost',
data: [20, 30, 25],
datalabels: {
display: false
}
}]
Common Mistakes
1. Not Registering the Plugin
Chart.register(DataLabels) is required. Missing this causes labels not to appear.
2. Labels Overlapping
Dense data causes labels to overlap. Set display: 'auto' to hide overlapping labels.
3. Labels Outside Chart Area
Labels aligned 'top' or 'bottom' may overflow the chart. Set clip: false or adjust offset.
4. Formatter Returning Non-String
formatter must return a string or null. Returning numbers or objects causes rendering errors.
5. Performance With Many Labels
Hundreds of labels slow rendering. Use display: function to show labels only for significant values.
Practice Questions
Q1: What npm package provides data labels? A: chartjs-plugin-datalabels.
Q2: How do you show labels only on specific datasets? A: Set display: false on one dataset's datalabels config.
Q3: What does anchor control? A: The attachment point of the label relative to the element: start, center, or end.
Q4: How do you format label text? A: Use the formatter callback function.
Q5: How do you auto-hide overlapping labels? A: Set display: 'auto' or provide a custom display function.
Challenge: Build a stacked bar chart with total value labels at the top of each stack and per-segment labels inside each section.
FAQ
Try It Yourself
Build a bar chart with formatted data labels.
<!DOCTYPE html>
<html>
<head>
<title>Data Labels Demo</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Sales by Quarter</h2>
<canvas id="labelChart" width="600" height="350"></canvas>
<script>
Chart.register(ChartDataLabels);
new Chart(document.getElementById('labelChart'), {
type: 'bar',
data: {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [{
label: 'Sales',
data: [30, 45, 40, 60],
backgroundColor: '#4ecdc4'
}]
},
options: {
responsive: true,
plugins: {
datalabels: {
anchor: 'end',
align: 'end',
color: '#333',
font: { weight: 'bold', size: 12 },
formatter: function(value) {
return '$' + value + 'K';
}
}
}
}
});
</script>
</body>
</html>
What's Next
Stream real-time data.
Streaming — Real-time streaming data. Zoom — Zoom and pan plugin.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro