PieceLabel plugin for Chart.js.
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
v0.7.0 has deprecated options. Please see CHANGELOG v0.7.0
v0.4.0 has breaking changes. Please see CHANGELOG v0.4.0
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]);
}
}
The project is released under the MIT license.
The project's website is located at https://github.com/emn178/Chart.PieceLabel.js
Author: Chen, Yi-Cyuan ([email protected])