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

chart series colour

hi ,

How to give different color for chart series in code behind.

thank you ,

5 Replies

DP Deepaa Pragaasam Syncfusion Team October 26, 2015 08:36 AM UTC

Hi Vijayakumar,
Thanks for contacting Syncfusion Support.
We have analyised your query.
The series color can be modified using the Fill Property of the series.
The below code shows the code behind way of setting the series fill.
Code Example:
this.Chart1.Series[0].Fill = "blue";


We have attached the sample for your reference
Please let us know if you have any concerns

VI Vijaykumar October 26, 2015 11:16 AM UTC

hi Deepaa,

Thanks for the update but your example show same color for the all the label. I want different color.
for client side i am using below code it will working fine :
 function onprerender(sender) {

            var length = sender.model.series[0].points.length - 6;
            var length2 = sender.model.series[0].points.length - 5;
            var length3 = sender.model.series[0].points.length - 4;
            var length4 = sender.model.series[0].points.length - 3;
            var length5 = sender.model.series[0].points.length - 2;
            var length6 = sender.model.series[0].points.length - 1;

            sender.model.series[0].points[length].fill = "#FFFF14";
            sender.model.series[0].points[length2].fill = "#00CDFF";
            sender.model.series[0].points[length3].fill = "#FF0000";
            sender.model.series[0].points[length4].fill = "#00AF50";
            sender.model.series[0].points[length5].fill = "#FAB478";
            sender.model.series[0].points[length6].fill = "#9999FF";
how can i perform above operation in code behind.

SK Sanjith Kesavan Syncfusion Team October 27, 2015 06:36 AM UTC

Hi Vijaykumar,

Thanks for your reply. We have analyzed your query and modified the sample as per your requirement. In the sample we have subscribed the “SeriesRendering” event and assigned the color in the datasource to the individual points of the column chart. Please find the below code example.


Please find the screenshot of the column chart with different color for individual point.

Please find the modified sample from below mentioned location.
Sample Link: http://www.syncfusion.com/downloads/support/forum/120890/ze/WebApplication21144430730

Please let us know if you have any concern.

Sanjith K.

VI Vijaykumar October 27, 2015 10:30 AM UTC

hi ,
For my code the series is dynamically created some time 2 or 3 series is created . i am using bar chart how give different color for series.
For your reference i attached one image zip.

Attachment: chart_6f8bc27.zip

SK Sanjith Kesavan Syncfusion Team October 28, 2015 10:51 AM UTC

Hi Vijaykumar,

Thanks for your reply. We have analyzed your query and modified sample as per your requirement. Initially chart is having only one series. In a button click we have dynamically adding new series to the chart. For setting color for the individual point we have subscribed “SereisRendering” event and write the below code.


In the getRandomColor method we have randomly created the colors and assigned that color for the each points using points.fill property. Now the each point in the chart will rendered in the different color. Please find the below screenshot.
Chart with one series

Chart with two series

Please find the sample from below location. Please let us know if you have any concern.
Sample Link: http://www.syncfusion.com/downloads/support/forum/120890/ze/WebApplication3436439570
Please let us know if you have any concern.

Sanjith K.

Live Chat Icon For mobile
Up arrow icon