Getting Started
#Installation
# asl
npm install chartjs-plugin-datalabels --save
This plugin can also be installed using Bower.
#CDN
By default, https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels 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:
https://cdn.jsdelivr.net/npm/[email protected] // exact version
https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@1 // latest 1.x.x
Read more about jsDeliver versioning on their website.
#Download
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)chartjs-plugin-datalabels.zip(contains.jsand.min.jsversions + samples)
#Integration
#HTML
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> IMPORTANT
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.
#Module
import Chart from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels'; #Registration
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'
Chart.plugins.unregister(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.
DEPRECATION
From version 1.x, this plugin will no longer be registered automatically (see #42 for details).
#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.global.plugins.datalabels.*
For example:
// Change default options for ALL charts
Chart.helpers.merge(Chart.defaults.global.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' } }] } });