Chart.js plugin to display labels on pie, doughnut and polar area chart.

Downloads in past


1.1.05 years ago6 years agoMinified + gzip package size for chartjs-plugin-labels in KB


Chart.js plugin to display labels on pie, doughnut and polar area chart. Original Chart.PieceLabel.js






You can also install chartjs-plugin-labels by using Bower.
bower install chartjs-plugin-labels
Or node.js, you can use this command to install:
npm install chartjs-plugin-labels


v1.0.0 has breaking changes. Please see CHANGELOG v1.0.0
v0.7.0 has deprecated options. Please see CHANGELOG v0.7.0
v0.4.0 has breaking changes. Please see CHANGELOG v0.4.0


new Chart(ctx, {
  type: type,
  data: data,
  options: {
    plugins: {
      labels: {
        // render 'label', 'value', 'percentage', 'image' or custom function, default is 'percentage'
        render: 'value',

        // precision for percentage, default is 0
        precision: 0,

        // identifies whether or not labels of value 0 are displayed, default is false
        showZero: true,

        // font size, default is defaultFontSize
        fontSize: 12,

        // font color, can be color array for each data or function for dynamic color, default is defaultFontColor
        fontColor: '#fff',

        // font style, default is defaultFontStyle
        fontStyle: 'normal',

        // font family, default is defaultFontFamily
        fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

        // draw text shadows under labels, default is false
        textShadow: true,

        // text shadow intensity, default is 6
        shadowBlur: 10,

        // text shadow X offset, default is 3
        shadowOffsetX: -5,

        // text shadow Y offset, default is 3
        shadowOffsetY: 5,

        // text shadow color, default is 'rgba(0,0,0,0.3)'
        shadowColor: 'rgba(255,0,0,0.75)',

        // draw label in arc, default is false
        // bar chart ignores this
        arc: true,

        // position to draw label, available value is 'default', 'border' and 'outside'
        // bar chart ignores this
        // default is 'default'
        position: 'default',

        // draw label even it's overlap, default is true
        // bar chart ignores this
        overlap: true,

        // show the real calculated percentages from the values and don't apply the additional logic to fit the percentages to 100 in total, default is false
        showActualPercentages: true,

        // set images when `render` is 'image'
        images: [
            src: 'image.png',
            width: 16,
            height: 16

        // add padding when position is `outside`
        // default is 2
        outsidePadding: 4,

        // add margin of text when position is `outside` or `border`
        // default is 2
        textMargin: 4

// custom render
  render: function (args) {
    // args will be something like:
    // { label: 'Label', value: 123, percentage: 50, index: 0, dataset: {...} }
    return '$' + args.value;

    // return object if it is image
    // return { src: 'image.png', width: 16, height: 16 };

// dynamic fontColor
  fontColor: function (args) {
    // args will be something like:
    // { index: 0, dataset: {...} }
    return myColorTransfer(args.dataset.backgroundColor[index]);

Support multiple options, eg.
labels: [
    render: 'label',
    position: 'outside'
    render: 'value'

Global options = {
  // ...

For Angular 2+

If you use angular2-chartjs, you can import by this:
import { ChartModule } from 'angular2-chartjs';
import 'chartjs-plugin-labels';


The project is released under the MIT license.


The project's website is located at
Author: Chen, Yi-Cyuan (