Accumulation Chart - Custom colors

Hello

I have a simple pie chart:

        var chart = new ej.charts.AccumulationChart({
            series: [
                {
                    dataSource: [{ x: 'Yes', y: 30 }, { x: 'No', y: 60 }],
                    xName: 'x',
                    yName: 'y'
                }
            ]
        });


I am trying to control the colour of the pie (ideally using a palette), but don't seem to able to get it working.  Do you have an example of applying custom colors to a pie chart?

Thank you







1 Reply

SB Swetha Babu Syncfusion Team August 26, 2022 06:44 AM UTC

Hi Ditchford,


Greetings from Synfusion.


We can render the Pie chart with custom colors by using the palettes property in the series of the Chart. We have created a simple Javascript application to demonstrate the same. Please find the below stackblitz link for your sample reference.


Sample link: https://stackblitz.com/edit/fvrtz8?file=index.js


Code Snippet:


series: [

            {

                dataSource: [{ x: 'Yes', y: 30 }, { x: 'No', y: 60 }],

                radius: '70%', xName: 'x',

                yName: 'y', startAngle: 0,

                endAngle: 0, innerRadius: '0%',

                name: 'Browser',

                palettes: ["red", "green"]

            }

        ],

        center: {x: '50%', y: '50%'},

        enableSmartLabels: true,

        enableAnimation: false,

        legendSettings: {

            visible: false,

        },

        //Initializing Tooltip

        tooltip: { enable: true, header: 'Browser', format: '${point.x}:<b> ${point.y}%<b>' },

        //Initializing Title

        title: 'Mobile Browser Statistics',


Screenshot:



Kindly, revert us if you have any concerns.


Regards,

Swetha


Loader.
Up arrow icon