# Doughnut
{ type: 'doughnut', data: { labels: labels, datasets: [{ backgroundColor: Utils.colors({ color: Utils.color(0), count: DATA_COUNT }), data: Utils.numbers({ count: DATA_COUNT, min: 0, max: 100 }), datalabels: { anchor: 'end' } }, { backgroundColor: Utils.colors({ color: Utils.color(1), count: DATA_COUNT }), data: Utils.numbers({ count: DATA_COUNT, min: 0, max: 100 }), datalabels: { anchor: 'center', backgroundColor: null, borderWidth: 0 } }, { backgroundColor: Utils.colors({ color: Utils.color(2), count: DATA_COUNT }), data: Utils.numbers({ count: DATA_COUNT, min: 0, max: 100 }), datalabels: { anchor: 'start' } }] }, options: { plugins: { datalabels: { backgroundColor: function(context) { return context.dataset.backgroundColor; }, borderColor: 'white', borderRadius: 25, borderWidth: 2, color: 'white', display: function(context) { var dataset = context.dataset; var count = dataset.data.length; var value = dataset.data[context.dataIndex]; return value > count * 1.5; }, font: { weight: 'bold' }, padding: 6, formatter: Math.round } }, // Core options aspectRatio: 4 / 3, cutoutPercentage: 32, layout: { padding: 32 }, elements: { line: { fill: false }, point: { hoverRadius: 7, radius: 5 } }, } }
← Bar Polar Area →