Change color based on a condition

[Jon Morris]

Hi,

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?

Thanks,
Sri

[Evgenia]

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">
         <Series>
             <telerik:ChartSeries Name="Series 1" Type="Line">
                 <Appearance>
                     <FillStyle MainColor="213, 247, 255">
                     </FillStyle>
                 </Appearance>
                 <Items>
                     <telerik:ChartSeriesItem Name="Item 1" YValue="45">
                     </telerik:ChartSeriesItem>
                     <telerik:ChartSeriesItem Name="Item 2" YValue="78">
                     </telerik:ChartSeriesItem>
                     <telerik:ChartSeriesItem Name="Item 3" YValue="29">
                     </telerik:ChartSeriesItem>
                     <telerik:ChartSeriesItem Name="Item 4" YValue="99">
                     </telerik:ChartSeriesItem>
                     <telerik:ChartSeriesItem Name="Item 5" YValue="200">
                     </telerik:ChartSeriesItem>
                 </Items>
             </telerik:ChartSeries>
         </Series>
        </telerik:radchart>

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.

Greetings,
Evgenia
the Telerik team

[Muthu]

How to do the same on javascript html controls?

[Petar Kirov]

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