RadarLineSeries XAxis labels bunched together

10 posts, 1 answers
  1. David
    David avatar
    301 posts
    Member since:
    Mar 2014

    Posted 24 Oct 2017 Link to this post

    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?

  2.
  3. Vessy
    Admin
    Vessy avatar
    2212 posts

    Posted 27 Oct 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. David
    David avatar
    301 posts
    Member since:
    Mar 2014

    Posted 27 Oct 2017 in reply to Vessy Link to this post

    Hi Vessy,

    Unfortunately, this produced no improvements.

    Please give me more suggestions?

    David

  7. Vessy
    Admin
    Vessy avatar
    2212 posts

    Posted 31 Oct 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. David
    David avatar
    301 posts
    Member since:
    Mar 2014

    Posted 31 Oct 2017 in reply to Vessy Link to this post

    I attached the project. Please rename extension to .zip

    Thank you

  11. Vessy
    Admin
    Vessy avatar
    2212 posts

    Posted 03 Nov 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  13. David
    David avatar
    301 posts
    Member since:
    Mar 2014

    Posted 06 Nov 2017 in reply to Vessy Link to this post

    None of these worked.

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

    Thank you

     

  14.
  15. Answer
    Vessy
    Admin
    Vessy avatar
    2212 posts

    Posted 09 Nov 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  17. David
    David avatar
    301 posts
    Member since:
    Mar 2014

    Posted 09 Nov 2017 Link to this post

    Thank you, it helped
  19. Vessy
    Admin
    Vessy avatar
    2212 posts

    Posted 10 Nov 2017 Link to this post

    Hi,

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

    Regards,
    Vessy
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top