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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

chart series colour

Thread ID:

Created:

Updated:

Platform:

Replies:

120890 Oct 26,2015 05:26 AM UTC Oct 28,2015 10:51 AM UTC ASP.NET Web Forms 5
loading
Tags: Chart
Vijaykumar
Asked On October 26, 2015 05:26 AM UTC

hi ,

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

thank you ,
Vijayakumar.s

Deepaa Pragaasam [Syncfusion]
Replied On 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";

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
Replied On 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.
Thanks 
Vijayakumar.S

Sanjith Kesavan [Syncfusion]
Replied On 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.

[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
Replied On 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

Sanjith Kesavan [Syncfusion]
Replied On 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.

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;