Closed Mayank07-HP closed 1 month ago
I want to add custom background colour in labels, like i attach screensort, i am using donut chart how i fix
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, }, };
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](https://github.com/apexcharts/apexcharts.js/assets/103020742/2c61ba88-9798-46de-8409-ded5b6fbfa9e)
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, }, };