This is a migrated thread and some comments may be shown as answers.

Bar Chart Y Axis Title/Tick Position

3 Answers 288 Views

Chart (HTML5)

This is a migrated thread and some comments may be shown as answers.

3 Answers, 1 is accepted

Accepted

answered on 04 Jul 2012, 06:10 AM

Capture.PNG

Hi Hunter,

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.

Accepted

answered on 04 Jul 2012, 07:31 AM

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

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.