Bar Chart Y Axis Title/Tick Position

4 posts, 2 answers
  1. Hunter
    Hunter avatar
    44 posts
    Member since:
    Aug 2012

    Posted 03 Jul 2012 Link to this post

    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.
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 04 Jul 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 04 Jul 2012 Link to this post

    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.
  5. Hunter
    Hunter avatar
    44 posts
    Member since:
    Aug 2012

    Posted 05 Jul 2012 Link to this post

    Thanks guys! I went ahead and marked both of your solutions as answers. Each is capable of getting me the result I am after.
Back to Top