RadarLineSeries XAxis labels bunched together

[David]

In attached the file you can see bunched labels on top and bottom.

I tried to adjust margin and padding, but it didn't help

Any advice?

[Vessy]

Hi David,

You can try playing with the Labels margin and distance values and see whether the result will satisfy your needs.

For example:

<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server"
    Height="300px" Width="300px">
    <Legend>
        <Appearance Position="Right">
        </Appearance>
    </Legend>
    <PlotArea>
        <Appearance>
            <TextStyle Margin="100" />
        </Appearance>
        <Series>
           ...
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>

<script>
    function pageLoad() {
        var chart = $find('<%=RadHtmlChart1.ClientID%>');
       chart._chartObject.options.seriesDefaults.labels.distance = 10;
       chart.repaint();
    }
</script>

I hope the suggested approach will be helpful for you.

Regards,
Vessy
Progress Telerik

[David]

Hi Vessy,

Unfortunately, this produced no improvements.

Please give me more suggestions?

David

[Vessy]

Hi David,

I am afraid that I will need to review the exact configuration used in your application in order to be able to see why the suggested settings are not applied. Can you, please, follow the steps from this blog post and send us a runnable simplified version of you code that we can test further at our side?


Looking forward to your reply,
Vessy
Progress Telerik

[David]

I attached the project. Please rename extension to .zip

Thank you

[Vessy]

Hi David,

Thanks a lot for the attached project.

You can play with the PlotArea.Appearance.TextStyle.Margin (with positive or negative values) and the PlotArea.XAxis.LabelsAppearance.TextStyle.Magin and PlotArea.XAxis.LabelsAppearance.TextStyle.Padding properties.

For example:

<telerik:RadHtmlChart runat="server" ID="chartEconomicVolatility_Normalized"
    Width="900" Height="720" Skin="Silk"
    Transitions="false"
    Style="margin-left: 5px;">
    <ChartTitle Text="">
        <Appearance Align="Center" Position="Top" Visible="false">
            <TextStyle Bold="true"  />
        </Appearance>
    </ChartTitle>
    <Legend>
        <Appearance Position="Right" Visible="true" OffsetX="5" OffsetY="5"></Appearance>
    </Legend>
    <PlotArea>
        <Series />
        <Appearance>
            <FillStyle BackgroundColor="Transparent"></FillStyle>
            <TextStyle Margin="-20"/>
        </Appearance>
        <XAxis AxisCrossingValue="0" Color="black" MajorTickType="Outside"
            MinorTickType="Outside" Reversed="true" Visible="true">
            <LabelsAppearance>
                <TextStyle Margin="0" Padding="30" />
            </LabelsAppearance>
            <TitleAppearance Position="Center" RotationAngle="0" Text="" Visible="false">
                <TextStyle Bold="true" />
            </TitleAppearance>
            <AxisCrossingPoints>
                <telerik:AxisCrossingPoint Value="0" />
                <telerik:AxisCrossingPoint Value="200" />
            </AxisCrossingPoints>
        </XAxis>
        <YAxis AxisCrossingValue="0" Color="black" MajorTickSize="1" MajorTickType="Outside"
            MinorTickSize="1" MinorTickType="Outside" Reversed="false">
            <LabelsAppearance RotationAngle="0" Skip="0" Step="1" DataFormatString="{0:N0}">
            </LabelsAppearance>
            <TitleAppearance Position="Center" RotationAngle="0" Text="" Visible="false">
                <TextStyle Padding="8" Margin="8" Bold="true" />
            </TitleAppearance>
        </YAxis>
    </PlotArea>
    <Appearance>
        <FillStyle BackgroundColor="Transparent"></FillStyle>
    </Appearance>
</telerik:RadHtmlChart>

Another thing you can consider is setting negative PlotArea.Appearance.TextStyle.Margin and split the labels in multiple rows by using "\n" sign in them.

Regards,
Vessy
Progress Telerik

[David]

None of these worked.

Please adjust project i specifically created for you to work as it should

Thank you

 

[Vessy]

Hi David,

The given code snippet is the modified part from the provided by you project, below you can see the result I get with it. I have even decreased the set TextStyle.Margin value in order to take away the labels event more. Of course, you can play with the values of the Margin and Padding in order to achieve the result that fits your requirements the best:
https://www.screencast.com/t/8r6w6r9MjRnX

I am attaching the modified version of your project, so you can examine it at your end.

Regards,
Vessy
Progress Telerik

[David]

Thank you, it helped

[Vessy]

Hi,

You are welcome, David - let us know should any further issue occur.

Regards,
Vessy
Progress Telerik