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:
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?
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?
5 Answers, 1 is accepted
0

Sam
Top achievements
Rank 1
answered on 26 Mar 2012, 07:00 PM
Hmm in looking back at it, now it's always saying item.Appearance.FillStyle.MainColorOpacity = 255, but the bar is still transparent. Any ideas?
0

Sam
Top achievements
Rank 1
answered on 26 Mar 2012, 07:40 PM
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.
0
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:
Regards,
Evgenia
the Telerik team
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.
0

Sam
Top achievements
Rank 1
answered on 30 Mar 2012, 04:06 AM
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?
May I suggest the ability to handle up/down colors natively for candlestick charts in the future?
0
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
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.