# Multiple Labels
Use multiple labels configuration to display 3 labels
per data, one for the index
, one for the label
and one for the value
. Move the mouse over
the chart to display label ids.
{ type: 'doughnut', data: { labels: labels, datasets: [{ backgroundColor: Utils.colors({ color: Utils.color(1), mode: 'darken' }), hoverBorderColor: 'white', data: Utils.numbers({ count: DATA_COUNT, min: 0, max: 100 }), datalabels: { labels: { index: { align: 'end', anchor: 'end', color: function(ctx) { return ctx.dataset.backgroundColor; }, font: {size: 18}, formatter: function(value, ctx) { return ctx.active ? 'index' : '#' + (ctx.dataIndex + 1); }, offset: 8, opacity: function(ctx) { return ctx.active ? 1 : 0.5; } }, name: { align: 'top', font: {size: 16}, formatter: function(value, ctx) { return ctx.active ? 'name' : ctx.chart.data.labels[ctx.dataIndex]; } }, value: { align: 'bottom', backgroundColor: function(ctx) { var value = ctx.dataset.data[ctx.dataIndex]; return value > 50 ? 'white' : null; }, borderColor: 'white', borderWidth: 2, borderRadius: 4, color: function(ctx) { var value = ctx.dataset.data[ctx.dataIndex]; return value > 50 ? ctx.dataset.backgroundColor : 'white'; }, formatter: function(value, ctx) { return ctx.active ? 'value' : Math.round(value * 1000) / 1000; }, padding: 4 } } } }] }, options: { plugins: { datalabels: { color: 'white', display: function(ctx) { return ctx.dataset.data[ctx.dataIndex] > 10; }, font: { weight: 'bold', }, offset: 0, padding: 0 } }, // Core options aspectRatio: 3 / 2, cutoutPercentage: 8, layout: { padding: 16 }, elements: { line: { fill: false, tension: 0.4 }, point: { hoverRadius: 7, radius: 5 } }, } }