Chart.js plugin to display labels on pie, doughnut and polar area chart.
{
labels: {
render: 'label'
}
}
{
labels: {
render: 'percentage',
fontColor: ['green', 'white', 'red'],
precision: 2
}
}
{
labels: {
render: 'percentage',
fontColor: function (data) {
var rgb = hexToRgb(data.dataset.backgroundColor[data.index]);
var threshold = 140;
var luminance = 0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b;
return luminance > threshold ? 'black' : 'white';
},
precision: 2
}
}
{
labels: {
render: 'value',
fontSize: 14,
fontStyle: 'bold',
fontColor: '#000',
fontFamily: '"Lucida Console", Monaco, monospace'
}
}
{
labels: {
render: function (args) {
return '$' + args.value;
},
arc: true
}
}
{
labels: {
render: 'label',
arc: true,
position: 'border'
}
}
{
labels: {
render: 'label',
fontColor: '#000',
position: 'outside'
}
}
{
labels: {
render: 'label',
arc: true,
fontColor: '#000',
position: 'outside'
}
}
{
labels: {
render: 'image',
images: [
{ src: 'taiwan.png', width: 32, height: 22 },
{ src: 'jpan.png', width: 32, height: 22 },
{ src: 'usa.png', width: 32, height: 22 }
]
}
}
{
labels: [
{
render: 'label',
position: 'outside'
},
{
render: 'percentage'
}
]
}
{
labels: [
{
render: 'label',
fontColor: '#000',
position: 'outside'
},
{
render: 'percentage',
fontColor: ['green', 'white', 'red'],
precision: 2
}
]
}
{
labels: {
render: 'value'
}
}
{
labels: {
render: 'percentage'
}
}
{
labels: {
render: 'value'
}
}