Chart PlotArea different background colors for region above zero and region below zero

[Arun Kumar]

Hi,

I have implemented RadChart with Negative values but now need to add seprate background colors for the PlotArea above zero and below zero. Please let me know how it could be done.

Regards,
Arun

[Giuseppe]

Hi Arun Kumar,

You can use the marked zones functionality to achieve the desired behavior like this:

<telerik:RadChart ID="RadChart1" runat="server">
    <Series>
        <telerik:ChartSeries>
            <Items>
                <telerik:ChartSeriesItem YValue="21" />
                <telerik:ChartSeriesItem YValue="33" />
                <telerik:ChartSeriesItem YValue="-40" />
                <telerik:ChartSeriesItem YValue="10" />
            </Items>
        </telerik:ChartSeries>
    </Series>
    <PlotArea>
        <MarkedZones>
            <telerik:ChartMarkedZone ValueStartY="0" ValueEndY="100">
                <Appearance FillStyle-MainColor="Green" />
            </telerik:ChartMarkedZone>
            <telerik:ChartMarkedZone ValueStartY="-100" ValueEndY="0">
                <Appearance FillStyle-MainColor="Red" />
            </telerik:ChartMarkedZone>
        </MarkedZones>
    </PlotArea>
</telerik:RadChart>

Hope this helps.


All the best,
Manuel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Arun Kumar]

Hi Manuel,

Thanks for the help.
it works perfectly.
Needed one more help.
Can you please help me in having the Label positioned on the chart.

Here is the piece of code that i have used but the text seems to ValueStartY for less than zero and ValueendY fro greater than zero.

ChartMarkedZone i

 

tem = new ChartMarkedZone();  

 

item.ValueStartY =0;

item.ValueEndY =RadChart2.PlotArea.YAxis.MaxValue;

item.Appearance.FillStyle.MainColor =

Color.LightGreen;

 

 item.Label.TextBlock.Text =

"Above Normal";

 

 

 

ChartMarkedZone item2 = new ChartMarkedZone();

 item2.ValueStartY = RadChart2.PlotArea.YAxis.MinValue;

item2.ValueEndY = 0;

item2.Appearance.FillStyle.MainColor =

Color.Maroon;

 

 item2.Label.TextBlock.Text =

"Below Normal";

 

 

RadChart2.PlotArea.MarkedZones.Add(item);

RadChart2.PlotArea.MarkedZones.Add(item2);

 

Is there a way to control the position of the Label displayed on the chart.

Thanks & Regards,
Arun Kumar P

[Giuseppe]

Hello Arun Kumar,

You can either use one of the predefined aligned positions like this:

item.Label.Appearance.Position.AlignedPosition = AlignedPositions.Top;

or alternatively you can disable the auto-positioning altogether and specify the (x,y) coordinates manually like this:

item.Label.Appearance.Position.Auto = false;
item.Label.Appearance.Position.X = 20;
item.Label.Appearance.Position.Y = 50;

Hope this helps.


All the best,
Manuel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.