chart series colour

[Vijaykumar]

hi ,

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

thank you ,

Vijayakumar.s

[Deepaa Pragaasam]

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";

Screenshot:


We have attached the sample for your reference
http://www.syncfusion.com/downloads/support/forum/120890/ze/webapplication1596882268
Please let us know if you have any concerns
Regards,
Deepaa

[Vijaykumar]

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.

Thanks 

Vijayakumar.S

[Sanjith Kesavan]

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.

[JS]


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.

Regards,
Sanjith K.

[Vijaykumar]

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

[Sanjith Kesavan]

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.

[JS]


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.

Regards
Sanjith K.