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

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

1 Answer 82 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Muhamed Shafi
Top achievements
Rank 1
Muhamed Shafi asked on 01 Dec 2011, 01:24 PM

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

1 Answer, 1 is accepted

Sort by
0
Petar Marchev
Telerik team
answered on 06 Dec 2011, 01:44 PM
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
Tags
Chart (Obsolete)
Asked by
Muhamed Shafi
Top achievements
Rank 1
Answers by
Petar Marchev
Telerik team
Share this question
or