Chart Y-axis label overlapping when autoScale is set to false

Thread is closed for posting
2 posts, 0 answers
  1. Muhamed Shafi
    Muhamed Shafi avatar
    22 posts
    Member since:
    Jan 2010

    Posted 01 Dec 2011 Link to this post

    Hi there,
        In my radchart, for y axis I set autoScale=False and added few items with different values. But the values are getting overlapped in the y -axis while doing this. Is there any way to over come this issue ? 
            I am attaching the desgin code and screen of the chart below for your reference

    <telerik:RadChart ID="RadChart2" Height="400px" SkinsOverrideStyles="true" runat="server"
                    AutoLayout="false">
                    <ClientSettings />
                    <PlotArea >
                        <XAxis>
                        </XAxis>
                        <YAxis AutoScale="false" >
                            <Items>
                                <telerik:ChartAxisItem Value="1">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="3">
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="200">
                                </telerik:ChartAxisItem>
                            </Items>
                        </YAxis>
                    </PlotArea>
                    <Series>
                        <telerik:ChartSeries Name="Series 1" Type="Line">
                            <Appearance>
                                <LineSeriesAppearance Width="3" />
                                <PointMark Visible="True" Border-Width="10" Border-Visible="true" FillStyle-FillType="Solid"
                                    Dimensions-AutoSize="true" Dimensions-Height="10px" Dimensions-Width="10px">
                                </PointMark>
                            </Appearance>
                            <Items>
                                <telerik:ChartSeriesItem XValue="1" YValue="1" Name="Item 20">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="3" YValue="2" Name="Item 100">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="4" YValue="70" Name="Item 100">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem XValue="5" YValue="71" Name="Item 20">
                                </telerik:ChartSeriesItem>
                                  <telerik:ChartSeriesItem XValue="6" YValue="73" Name="Item 20">
                                </telerik:ChartSeriesItem>
                              
                            </Items>
                        </telerik:ChartSeries>
                    </Series>
                </telerik:RadChart>

    Thanks and Regards
    Shafi
  2. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 06 Dec 2011 Link to this post

    Hi Shafi,

    Thank you for the attached screenshot.

    I see that you have set your scale to be from 0 to 200. You have also expressly added two chart axis items - for the "1" and for the "3". The labels overlap because these values are very close together, relative to the scale.

    One option, of course, is to set values that are not that close together. For instance you can use 0, 50, 100, 150, 200.

    If, however, you need to keep the current values I can only suggest that you use a margin for the items.
    <telerik:ChartAxisItem Value="3" Appearance-Dimensions-Margins="0, -10, 0, 0" />

    You can check out our help on margins here.

    Kind regards,
    Petar Marchev
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top