apexcharts / apexcharts.js

📊 Interactive JavaScript Charts built on SVG
https://apexcharts.com
MIT License
14.05k stars 1.28k forks source link

Can we add custom Donuts background color inside labels #4466

Closed Mayank07-HP closed 1 month ago

Mayank07-HP commented 1 month ago

I want to add custom background colour in labels, like i attach screensort, i am using donut chart how i fix Screenshot from 2024-05-14 13-58-37

var options: ApexCharts.ApexOptions = { plotOptions: { pie: { startAngle: -90, endAngle: 90, offsetY: -7, expandOnClick: false, donut: { size: "80%", labels: { show: true, name: { show: true, fontSize: "22px", fontFamily: "Rubik", color: "#54575F", offsetY: -60, }, value: { show: true, fontSize: "22px", fontWeight: 600, color: "white", offsetY: -40, formatter: function (val) { return val; }, }, total: { show: true, label: t("InfrigmentsTotal"), color: "#54575F", formatter: function (w) { return totalValue ? totalValue : w.globals.seriesTotals.reduce((a: number, b: number) => { return a + b; }, 0); }, }, }, }, }, }, stroke: { width: 0, }, colors: ["#D6B6FB", "#7875FF", "#5B27F7", "#83E8EE", "#FFF"], title: { align: "center", floating: true, }, legend: { show: false, }, dataLabels: { enabled: false, }, };