# Getting Started

# Installation

# npm

npm install chartjs-plugin-datalabels --save

TIP

This plugin can also be installed using Bower (opens new window).

# CDN

(opens new window) (opens new window)

By default, https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels returns the latest (minified) version, however it's highly recommended (opens new window) to always specify a version in order to avoid breaking changes. This can be achieved by appending @{version} to the url:

https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0    // exact version
https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2        // latest 2.x.x

Read more about jsDeliver versioning on their website (opens new window).

# Download

(opens new window) (opens new window)

You can download the latest version of chartjs-plugin-datalabels from the GitHub releases (opens new window):

chartjs-plugin-datalabels.js (recommended for development)
chartjs-plugin-datalabels.min.js (recommended for production)
chartjs-plugin-datalabels.esm.js
chartjs-plugin-datalabels.tgz (contains all builds)
chartjs-plugin-datalabels.zip (contains all builds)

# Integration

# HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>

IMPORTANT

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

Once loaded, the plugin, available under the global ChartDataLabels property, needs to be registered.

# Module

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

Once imported, the plugin needs to be registered.

# Registration

Since version 1.x, this plugin no longer registers itself automatically. It must be manually registered either globally or locally (see #42 (opens new window) for the rationale).

// Register the plugin to all charts:
Chart.register(ChartDataLabels);

// OR only to specific charts:
var chart = new Chart(ctx, {
  plugins: [ChartDataLabels],
  options: {
    // ...
  }
})

TIP

When imported via a <script> tag, use the global property ChartDataLabels.

# Configuration

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: Chart.defaults.plugins.datalabels.*

For example:

// Change default options for ALL charts
Chart.defaults.set('plugins.datalabels', {
  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'
      }
    }]
  }
});

← Introduction Options →