Getting Started



npm npm downloads

npm install chartjs-plugin-datalabels --save

This plugin can also be installed using Bower.


jsdelivr jsdelivr hits

By default, returns the latest (minified) version, however it's highly recommended to always specify a version in order to avoid breaking changes. This can be achieved by appending @{version} to the url:    // exact version        // latest 1.x.x

Read more about jsDeliver versioning on their website.


github github downloads

You can download the latest version of chartjs-plugin-datalabels from the GitHub releases:

  • chartjs-plugin-datalabels.js (recommended for development)
  • chartjs-plugin-datalabels.min.js (recommended for production)
  • (contains .js and .min.js versions + samples)



<script src=""></script>
<script src=""></script>


chartjs-plugin-datalabel must be loaded after the Chart.js library!

Once imported, the plugin is available under the global property ChartDataLabels. This is useful to register/unregister the plugin afterward.


import Chart from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';


This plugin registers itself globally, meaning that once imported, all charts will display labels. In case you want it enabled only for a few charts, you first need to unregister it globally:

// NOTE: when imported as a <script> tag, use the global property 'ChartDataLabels'

Then, you can enabled the plugin only for specific charts:

var chart = new Chart(ctx, {
    plugins: [ChartDataLabels],
    options: {
        // ...

See also Chart.js › Using plugins.


From version 1.x, this plugin will no longer be registered automatically (see #42 for details).


The plugin options can be changed at 3 different levels and are evaluated with the following priority:

  • per dataset: dataset.datalabels.*
  • per chart: options.plugins.datalabels.*
  • or globally:*

For example:

// Change default options for ALL charts
Chart.helpers.merge(, {
    color: '#FE777B'

var chart = new Chart(ctx, {
    options: {
        plugins: {
            // Change options for ALL labels of THIS CHART
            datalabels: {
                color: '#36A2EB'
    data: {
        datasets: [{
            // Change options only for labels of THIS DATASET
            datalabels: {
                color: '#FFCE56'