imranhamzah / chart.piecelabel.js

Plugin for Chart.js to display percentage, value or label in Pie or Doughnut.

Chart.PieceLabel.js

PieceLabel plugin for Chart.js.

Demo

Demo

Download

Compress
Uncompress

Installation

You can also install Chart.PieceLabel.js by using Bower.

bower install Chart.PieceLabel.js

Or node.js, you can use this command to install:

npm install chart.piecelabel.js

Notice

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

Usage

JavaScript

new Chart(ctx, {
  type: type,
  data: data,
  options: {
    pieceLabel: {
      // 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 label in arc, default is false
      arc: true,

      // position to draw label, available value is 'default', 'border' and 'outside'
      // default is 'default'
      position: 'default',

      // draw label even it's overlap, default is false
      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
        }
      ]
    }
  }
});

// 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]);
  }
}

License

The project is released under the MIT license.

Contact

The project's website is located at https://github.com/emn178/Chart.PieceLabel.js
Author: Chen, Yi-Cyuan ([email protected])