Assigning a color to a particular data

[Javier]

I got an odd issue that I'm not sure how to solve (or if it is possible).

We have a bunch of projects that each use a different subset of "Funds". So, Project 1 may use all 10 funds, while Project 2 may only use 5.

Is there a way to assign a color to each item, so that it always shows up as that color regardless if the other items are part of the chart or not?

In the screen shots you see, "Other Fund" (the 15 million value), you can see is green in one chart, but gray in the other. I would like to for them to always be the same.

It be great to be able to do something like (made up the "fill" property):

 { x: 'Other Fund', y: 15714557, text: '$15,714,557', fill: '8E8E8E' },

Is something like this possible?

Thank you.

[Swetha Babu]

Hi Javier,

Greetings from Syncfusion.

We can render the color for the slice of the pie chart based on your requirement by setting the dataSource property where the color for the slice is defined to the pointColorMapping property in the series of the chart. We have created a javascript application to demonstrate the same. Please find the below stackblitz link for your reference.

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

Code Snippet:

series: [

            {

                dataSource:

                    [

                        { 'x': 'Chrome', y: 59.28, fill: "red" },

                        { 'x': 'UC Browser', y: 4.37, fill: "green" },

                        { 'x': 'Opera', y: 3.12, fill: "blue" },

                        { 'x': 'Sogou Explorer', y: 1.73, fill: "grey" },

                        { 'x': 'QQ', y: 3.96, fill: "Orange" },

                        { 'x': 'Safari', y: 4.73, fill: "aqua" },

                        { 'x': 'Internet Explorer', y: 6.12, fill: "pink" },

                        { 'x': 'Edge', y: 7.48, fill: "violet" },

                        { 'x': 'Others', y: 9.57, fill: "#8E8E8E" }

                    ],

                dataLabel: {

                    visible: true, position: 'Outside', name: 'text', font: { fontWeight: '600' }, connectorStyle:{length : '20px', type: 'Curve'}

                },radius: ej.base.Browser.isDevice ? '40%' : '70%',

                xName: 'x', yName: 'y', startAngle: ej.base.Browser.isDevice ? 55 : 35,

                name: 'Browser',

                pointColorMapping: "fill"

            }

        ],

Screenshot:

Kindly revert us if you have any concerns.

Regards,

Swetha

[Javier]

Perfect.  Thank you very much.

[Swetha Babu]

Javier,

Most Welcome! Please get back to us if you need further assistance.