Posts

Showing posts with the label Donut Chart

Chart.js Doughnut With Rounded Edges And Text Centered

Image
Answer : With v2.1.3, you can use the pluginService to do this Preview Script // round corners Chart.pluginService.register({ afterUpdate: function (chart) { if (chart.config.options.elements.arc.roundedCornersFor !== undefined) { var arc = chart.getDatasetMeta(0).data[chart.config.options.elements.arc.roundedCornersFor]; arc.round = { x: (chart.chartArea.left + chart.chartArea.right) / 2, y: (chart.chartArea.top + chart.chartArea.bottom) / 2, radius: (chart.outerRadius + chart.innerRadius) / 2, thickness: (chart.outerRadius - chart.innerRadius) / 2 - 1, backgroundColor: arc._model.backgroundColor } } }, afterDraw: function (chart) { if (chart.config.options.elements.arc.roundedCornersFor !== undefined) { var ctx = chart.chart.ctx; var arc = chart.getDatasetMeta(0).data[chart.config.options.eleme...