Display total label of Pie chart outside chart on right in Apex Charts for Angular

357 Views Asked by At

I am using Pie chart, Type donut with following chart Options.

this.chartOptions = {
            series: [100, 20],
            chart: {
                type: 'donut',
                
            },
            title: {
                text: 'Total Amount',
                align: 'left',
                offsetX: -10,
                style: {
                    fontSize: '14px',
                    color: 'black',
                },
            },
            labels: [
                 Spent,Earned
            ],
           
            plotOptions: {
                pie: {
                    offsetX: -90,
                    offsetY: 0,
                    customScale: 1,
                    expandOnClick: false,
                    donut: {
                        size: '70%',
                        
                    },
                    
                },
            },
            legend: {
                offsetX: -30,
                offsetY: 10,
                show: true,
                position: 'bottom',
                formatter: function (seriesName) {
                    return seriesName;
                },

                horizontalAlign: 'left',
            }, 
           
            colors: ['#2121EC', '#FF9A8A'],
            responsive: [
                {
                    breakpoint: 500,
                    options: {
                        chart: {
                            width: 100,
                        },
                    },
                },
            ],
            dataLabels: {
                enabled: false,
            },
            
        };
    }

I have labels outside which are working fine. But When I use total label of donut chart, it is displayed inside the chart. But I want it outside, on the right side of chart. There is no position element to set total outside the chart in documentation.

0

There are 0 best solutions below