Candlestick Chart colors

[Sam]

I am using the candlestick chart in my .NET C# stock market app. As you can see from http://demos.telerik.com/aspnet-ajax/chart/examples/newfeatures/candlestick/defaultcs.aspx the ChartSeries.Appearance-FillStyle-MainColor only sets the background color of the items whose close was lower than the open. Items whose close was higher than the open seem to have a transparent fill. I need to set those to a color (I want green fill for up days and red for down days).

I thought I could do the following:

foreach (ChartSeriesItem item in RadChart1.Series[0].Items)

{

   item.Appearance.FillStyle.MainColorOpacity = 255;
    item.Appearance.FillStyle.MainColor = item.YValue2 > item.YValue ? Color.Green : Color.Red;

}

But that doesn't build because even though the intellisense for MainColorOpacity says "gets or sets", Visual Studio tells me it's read only and it's stuck at "0" if close > open. How can I set a fill color on these items?

[Sam]

Hmm in looking back at it, now it's always saying item.Appearance.FillStyle.MainColorOpacity = 255, but the bar is still transparent. Any ideas?

[Sam]

Here's a very simple way to reproduce:

<telerik:RadChart runat="server" ID="RadChart2" Width="370" SkinsOverrideStyles="false" >

    <Series>

        <telerik:ChartSeries Name="series 1" Type="CandleStick">

        <Appearance Border-Color="black" Border-Width="1" >

        </Appearance>

        <Items>

        <telerik:ChartSeriesItem YValue="3" YValue2="4.5" YValue3="1" YValue4="6" XValue="0"  Appearance-FillStyle-MainColor="Gold"  />

        <telerik:ChartSeriesItem YValue="5" YValue2="4" YValue3="2" YValue4="8" XValue="1" Appearance-FillStyle-MainColor="Green" />

        <telerik:ChartSeriesItem YValue="5.5" YValue2="5" YValue3="3" YValue4="6" XValue="2"  Appearance-FillStyle-MainColor="Aqua" />

        <telerik:ChartSeriesItem YValue="5" YValue2="4" YValue3="3" YValue4="7" XValue="3"  Appearance-FillStyle-MainColor="Chocolate" />

        <telerik:ChartSeriesItem YValue="5" YValue2="6" YValue3="4" YValue4="6.5" XValue="4"  Appearance-FillStyle-MainColor="Blue" />

        </Items>

        </telerik:ChartSeries>

    </Series>

     

</telerik:RadChart>


As you can see the first and last bars are transparent. I need them to be filled.


[Evgenia]

Hi Sam,

Unfortunately the RadChart's API does not allow that you can change the MainColorOpacity and there is no way out-of-the-box to change the color of the candlesticks that have YValue < YValue2. A workaround that I came up with is to reverse them and set the desired color. This should be done in the BeforeLayout's event body:

void RadChart1_BeforeLayout(object sender, EventArgs e)
{
    foreach (ChartSeriesItem item in RadChart1.Series[0].Items)
    {
        item.Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Solid;
        if (item.YValue < item.YValue2)
        {
            double low = item.YValue;
            double high = item.YValue2;
            item.YValue = high;
            item.YValue2 = low;
            item.Appearance.FillStyle.MainColor = Color.Green;
        }
        else
        {
            item.Appearance.FillStyle.MainColor = Color.Red;
        }
    }
}

  
Regards,
Evgenia
the Telerik team

[Sam]

That was a very inventive solution and worked perfectly! Thank you.

May I suggest the ability to handle up/down colors natively for candlestick charts in the future?

[Evgenia]

Hi Sam,

I'm glad that this workaround satisfied you. I have also forwarded your requirement to our developers for further clarification. They will decide whether and when this will be made in future, currently I can not give you an exact timeframe.

Greetings,
Evgenia
the Telerik team