We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Assigning a color to a particular data

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?

pie chart 2.png

pie chart.png

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.

3 Replies 1 reply marked as answer

SB Swetha Babu Syncfusion Team March 15, 2023 01:00 PM UTC

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: [




                        { '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"




Kindly revert us if you have any concerns.



Marked as answer

JA Javier March 15, 2023 05:49 PM UTC

Perfect.  Thank you very much.

SB Swetha Babu Syncfusion Team March 16, 2023 04:53 AM UTC


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

Live Chat Icon For mobile
Up arrow icon