Add Datalabels to Charts in Chart.JS
How to format data labels in chart.js
Chart.js is a great tool for drawing charts and graphs and making them responsive. With chart.js you can easily draw good looking charts and assign values using data labels. You can also include tooltips so when the user scrolls, it shows the value for that bar.
Chart.js is highly flexible and you can make attractive charts and format them to include interactive features. Data labels are a common requirement when you are drawing a chart since you might want to show the corresponding value on each bar in a bar chart or at each point in a line chart. However, sometimes, the value is not just a number and you might want to assign it a currency value like dollar or Euros or some other currency. You can easily format the data labels with chart.js using a formatter to include a currency sign before the numerical values.
Regardless of the type of chart you want to draw including bar chart, line chart, pie chart or a doughnut chart, you might want to add data labels. In this post, we will show you how to add and format data labels in chart.js.
Even if you want to create a stacked bar chart, you might need to assign data labels for each stack in every bar to show the corresponding values to the visitors. Let’s start by creating a bar chart and then assigning and formatting data labels. However, we will first need to create a basic bar chart.
Install Chart.JS
To begin with, let’s install chart.js. If you have access to your server, you can easily install it with npm or you can include the cdn link in the head section of your website’s html.
If you want to install chart.js using npm, run the following command from the terminal:
npm install chart.js
Otherwise, you can simply install it using the cdn link. Go here to grab the cdn link or the complete script: https://cdnjs.com/libraries/Chart.js
Add the following script to your website header:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.min.js" integrity="sha512-L0Shl7nXXzIlBSUUPpxrokqq4ojqgZFQczTYlGjzONGTDAcLremjwaWv5A+EDLnxhQzY5xUZPWLOLqYRkY0Cbw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
The latest version of chart.js as of now is 4.4.1.
Draw a bar chart in chart.js
In the following example, we are going to create a simple bar chart with a single data set and will render it on an html page. The code is given below:
<div>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('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],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
Let’s break down the above piece of code. First of all, we need to give the chart its own container for responsiveness. So, we draw a canvas first:
<div>
<canvas id="myChart"></canvas>
</div>
After having drawn the canvas, we include chart.js from a cdn link
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Following that, we add a script to instantiate the chart with desired configuration.
<script>
const ctx = document.getElementById('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],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
Now, you will have a chart that looks like this.
.webp)
Adding Data Labels to a bar chart
The chart above does not yet include data labels since we have not formatted the chart and added them. If we include the data labels, it will label each bar in the above image with the corresponding number of votes.
Data Labels can be added to chart.js bar graphs in the form of a plugin and then configured to provide the desired output. To add datalabels to a chart, we need to first include it using a cdn link and then register the datalabels plugin.
First, we add the cdn link right below the link for including chart.js and then register the Datalabels plugin in the following manner:
<div>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
<script>
const ctx = document.getElementById('myChart');
Chart.register(ChartDataLabels);
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
This will give us a chart with a data labels in the center of each bar in black color (default) as in the image below:
.webp)
So, this is how you can add datalabels to your charts. This is the default format and you can further customize their position, font size and color or even add a currency sign before them.
Formatting DataLabels in Chart.JS
Now that we have added datalabels to our chart, we might want to change their position or font size to suit our presentation. For example, you might want to move the datalabels to the bottom or top of the bar or position the datalabels right outside the bar area at the top.
DataLabels are added to the charts in chart.js using the plugin method. So, further customizations can be made in the plugins section inside options in the script.
options.plugins.datalabels.*
options: {
plugins: {
// Change options for ALL labels of THIS CHART
datalabels: {
color: 'Red', align: ‘top’, anchor: ‘end’
}
}
Let’s customize our original chart and try moving the data label to the top and increase its font size.
To change the position of our datalabels, we can use the align and anchor properties in the code. We are trying to position the datalabels right outside the bar at the top, so we will use align: ‘top’ and anchor: ‘end’.
The supported values for anchor include center, start and end. However, for align, we can also use top, bottom, left and right. By changing these values, you can alter the position of datalabels. We can also change the color of the datalabels. For example, check out the code below, where we have used Red color for datalabels and positioned them at the top, 20px outside the bar area.
<div>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
<script>
const ctx = document.getElementById('myChart');
Chart.register(ChartDataLabels);
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: { plugins: { datalabels: {color: 'Red', align: 'top', anchor: 'end', offset: 20,}
},
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
The output will look like the following image:
.webp)
Adding currency sign to datalabels in chart.js
The above method will be sufficient for optimizing datalabels where they have to be shown in the form of plain numbers. However, in certain cases, you may need to show the datalabels in the form of $ or Euro values. In that case, you will need to assign a $ sign to the datalabels using a formatter.
For example, let’s say, we are creating a bar chart that shows the prices of six items like Item-A to Item-F. We want to add datalabels and the prices need to be shown in dollars. We can add a formatter to format the datalabels and include a $ sign before the numerical values assigned to each bar in the dataset.
Take a look at the code below:
<div>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
<script>
const ctx = document.getElementById('myChart');
Chart.register(ChartDataLabels);
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Item-A', 'Item-B', 'Item-C', 'Item-D', 'Item-E', 'Item-F'],
datasets: [{
label: 'Prices',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: { plugins: { datalabels: {color: 'Red', align: 'top', anchor: 'end', offset: 20, formatter: function(value) {
return ' $' + value;
},}
},
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
The following part of the code inside the plugins section is used to add the dollar sign.
formatter: function(value) {
return ' $' + value;
},
This will output the datalabels with dollar signs prefixed to them like in the image below:
.webp)
Now, suppose you want to show the prices in millions or billions, you can add that by making changes to the formatter as shown below.
formatter: function(value) {
return ' $' + value + ' million';
},
So, this is how you can easily set datalabels in chart.js for any type of chart including line chart, bar chart or pie chart. We used a bar chart for the above example. You can change the default position of the datalabels as well as color, and font size as per your choice. Apart from that, you also saw how you can add a currency sign to datalabels in chart.js in this tutorial.