Change color based on a condition

Thread is closed for posting
4 posts, 0 answers
  1. Jon Morris
    Jon Morris avatar
    11 posts
    Member since:
    Jan 2010

    Posted 05 Oct 2010 Link to this post


    Is there a way to change the color of a series based on a condition? For eg: I am plotting a line chart with a series with values between 0 and 200.Is there a way to change the color of the series if it goes past 100?

  2. Evgenia
    Evgenia avatar
    1398 posts

    Posted 07 Oct 2010 Link to this post

    Hello Jon,

    Indeed you can change Line series color. For example if you have series items with these values:
    <telerik:radchart ID="RadChart1" runat="server" DefaultType="Line">
                 <telerik:ChartSeries Name="Series 1" Type="Line">
                         <FillStyle MainColor="213, 247, 255">
                         <telerik:ChartSeriesItem Name="Item 1" YValue="45">
                         <telerik:ChartSeriesItem Name="Item 2" YValue="78">
                         <telerik:ChartSeriesItem Name="Item 3" YValue="29">
                         <telerik:ChartSeriesItem Name="Item 4" YValue="99">
                         <telerik:ChartSeriesItem Name="Item 5" YValue="200">

    You can use FillType.MainColor property of the series to set custom color for them. Setting color based on condition is as simple as this:

    foreach (ChartSeriesItem item in RadChart1.Series[0].Items)
                    if (item.YValue > 100)
                        RadChart1.Series[0].Appearance.FillStyle.MainColor = Color.Purple;

    In this case Line will be shown with purple color as one of its items has Yvalue 200.

    I hope this helps.

    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft R3 2016 release webinar banner
  4. Muthu
    Muthu avatar
    1 posts
    Member since:
    Mar 2013

    Posted 23 Apr 2013 Link to this post

    How to do the same on javascript html controls?
  5. Petar Kirov
    Petar Kirov avatar
    425 posts

    Posted 25 Apr 2013 Link to this post

    Hi Muthu,

    With the ASP.NET AJAX HtmlChart you can use the Appearance.FillStyle.BackgroundColor property of the LineSeries. In this help topic you read more about that.
    I hope this helps.

    All the best,
    Petar Kirov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top