Candlestick Chart colors

Thread is closed for posting
6 posts, 0 answers
  1. Sam
    Sam avatar
    4 posts
    Member since:
    Nov 2011

    Posted 26 Mar 2012 Link to this post

    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?
  2. Sam
    Sam avatar
    4 posts
    Member since:
    Nov 2011

    Posted 26 Mar 2012 Link to this post

    Hmm in looking back at it, now it's always saying item.Appearance.FillStyle.MainColorOpacity = 255, but the bar is still transparent. Any ideas?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sam
    Sam avatar
    4 posts
    Member since:
    Nov 2011

    Posted 26 Mar 2012 Link to this post

    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.
  5. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 29 Mar 2012 Link to this post

    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
    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.
  6. Sam
    Sam avatar
    4 posts
    Member since:
    Nov 2011

    Posted 29 Mar 2012 Link to this post

    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?
  7. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 03 Apr 2012 Link to this post

    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
    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
UI for ASP.NET Ajax is Ready for VS 2017