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' } }