I'd like to place the Y Axis (Title/Tick) at the bottom of the chart instead of the default top position. To see an example of the default top position you can visit Telerik's demo here. What I'd like to do is display the Sum and ticks (ex. $0, $100000, etc.) at the bottom of the chart. This is the default functionality of the standard Telerik Chart when placed in Horizontal orientation. Thanks.
3 Answers, 1 is accepted
0
Accepted
Shinu
Top achievements
Rank 2
Rank 2
answered on 04 Jul 2012, 06:10 AM
Hi Hunter,
Try setting Reversed property of XAxis to true. Here is the sample code that I tried based on your scenario.
ASPX:
Attached is the screenshot.
Thanks,
Shinu.
Try setting Reversed property of XAxis to true. Here is the sample code that I tried based on your scenario.
ASPX:
<telerik:RadHtmlChart runat="server" ID="BarChart" Width="800" Height="500" Transitions="true"> <Appearance> <FillStyle BackgroundColor="White" /> </Appearance> <ChartTitle Text="Revenue"> <Appearance Align="Center" BackgroundColor="White" Position="Top" /> </ChartTitle> <Legend> <Appearance BackgroundColor="White" Position="Bottom" /> </Legend> <PlotArea> <Appearance> <FillStyle BackgroundColor="White" /> </Appearance> <XAxis AxisCrossingValue="0" Color="#b3b3b3" MajorTickType="Outside" MinorTickType="Outside" Reversed="true" > <Items> <telerik:AxisItem LabelText="2003" /> <telerik:AxisItem LabelText="2004" /> <telerik:AxisItem LabelText="2005" /> </Items> <LabelsAppearance DataFormatString="Year {0}" RotationAngle="0" /> <MajorGridLines Color="#EFEFEF" Width="1" /> <MinorGridLines Color="Black" Width="1" /> <TitleAppearance Position="Center" RotationAngle="0" Text="Years" /> </XAxis> <YAxis AxisCrossingValue="0" Color="#b3b3b3" MajorTickSize="1" MajorTickType="Outside" MaxValue="1000000" MinorTickSize="1" MinorTickType="Outside" MinValue="0" Reversed="false" Step="100000"> <LabelsAppearance DataFormatString="${0}" RotationAngle="0" /> <MajorGridLines Color="#EFEFEF" Width="1" /> <MinorGridLines Color="#F7F7F7" Width="1" /> <TitleAppearance Position="Center" RotationAngle="0" Text="Sum" /> </YAxis> <Series> <telerik:BarSeries Name="Quarter 1" Stacked="false"> <Appearance> <FillStyle BackgroundColor="#c5d291" /> </Appearance> <LabelsAppearance DataFormatString="${0}" Position="Center" /> <TooltipsAppearance BackgroundColor="#c5d291" DataFormatString="${0}" /> <Items> <telerik:SeriesItem YValue="315000" /> <telerik:SeriesItem YValue="495000" /> <telerik:SeriesItem YValue="690000" /> </Items> </telerik:BarSeries> <telerik:BarSeries Name="Quarter 2"> <Appearance> <FillStyle BackgroundColor="#92b622" /> </Appearance> <LabelsAppearance DataFormatString="${0}" Position="Center" /> <TooltipsAppearance BackgroundColor="#92b622" DataFormatString="${0}" /> <Items> <telerik:SeriesItem YValue="360000" /> <telerik:SeriesItem YValue="540000" /> <telerik:SeriesItem YValue="735000" /> </Items> </telerik:BarSeries> <telerik:BarSeries Name="Quarter 3"> <Appearance> <FillStyle BackgroundColor="#729021" /> </Appearance> <LabelsAppearance DataFormatString="${0}" Position="Center" /> <TooltipsAppearance BackgroundColor="#729021" DataFormatString="${0}" /> <Items> <telerik:SeriesItem YValue="405000" /> <telerik:SeriesItem YValue="600000" /> <telerik:SeriesItem YValue="780000" /> </Items> </telerik:BarSeries> </Series> </PlotArea></telerik:RadHtmlChart>Attached is the screenshot.
Thanks,
Shinu.
0
Accepted
Hello guys,
I would advise that you take a look at the AxisCrossingValue property for the XAxis. You can see how it works in the demo you linked - just expand the X Axis configurator and change it (the texbox's label is Crossing Value), then press "Configure". This property is explained in the documentation, e.g. in this help article where the axes are treated. Said shortly - this value determines where the other axis crosses the one whose property you set. For numerical axes this is the numerical value, for category axes (like your case) this is the item index.
Kind regards,
Marin Bratanov
the Telerik team
I would advise that you take a look at the AxisCrossingValue property for the XAxis. You can see how it works in the demo you linked - just expand the X Axis configurator and change it (the texbox's label is Crossing Value), then press "Configure". This property is explained in the documentation, e.g. in this help article where the axes are treated. Said shortly - this value determines where the other axis crosses the one whose property you set. For numerical axes this is the numerical value, for category axes (like your case) this is the item index.
Kind regards,
Marin Bratanov
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
Hunter
Top achievements
Rank 1
Rank 1
answered on 05 Jul 2012, 04:13 PM
Thanks guys! I went ahead and marked both of your solutions as answers. Each is capable of getting me the result I am after.