Chart.PieceLabel.js

PieceLabel plugin for Chart.js.

Demo

Demo Demo 2

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
        }
      ]
	  
      // available only when position = 'outside'
      // if value = true show a callout arrow to label
      segment: false,

      // available only when position = 'outside'
      // stroke color for segment (if value = 'auto' use series backgroundColor)
      segmentColor: 'auto'
	  
    }
  }
});

// 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 (emn178@gmail.com)