Stacked Column series item label getting overlapping

7 posts, 0 answers
  1. Kannan
    Kannan avatar
    8 posts
    Member since:
    Aug 2012

    Posted 21 Nov 2012 Link to this post

    Hi,

    I am using StackedBar series in RadHtml Chart.
    In the chart xaxis having both positive and negative values data. When it is having negative and postive data it is getting overlapping the item labels.
    Can you please let me know how to make them display in different locations?

    Regards
    Kannan S

  2.
  3. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1502 posts

    Posted 26 Nov 2012 Link to this post

    Hi Kannan,

    I assume you are dealing with scenario similar to this and trying to make it look like that.
    In that case a possible way to evade the overlapping of the negative Items labels with the XAxis labels could be to simply set items' labels position outside the items themselves:
    <LabelsAppearance DataFormatString="${0}" Position="OutsideEnd" />

    Please refer to this Server-side API article where you can find the full list of the styling properties that RadHtmlChart provides. I am attaching my VS sample in RadHtmlChart_BarSeries_Stacked.zip archive as well.

    Kind regards,
    Danail Vasilev
    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. Marcelino
    Marcelino avatar
    4 posts
    Member since:
    Jul 2012

    Posted 16 May 2013 Link to this post

    Hello,

    I was not sure if I should create a new thread but I have similar issue.

    Problem:
    For one particular case when there are stacked high amounts and some very low amounts, causing the ratio to set small columns and overlapping the labels. (please check uploaded image)

    What I have tried:
    1) Set position on the Series.LabelAppearance, all the 4 options (Center, Inside Base, Inside end, Outside End) and of course they all keep overlapping.
    2) Set Minimum and Max Values for the Y axis
    3) Smaller Font.

    I was looking for the intelligent labels but I didn't find any similar option 
    http://demos.telerik.com/aspnetajax/chart/examples/newfeatures/intelligentlabels/defaultcs.aspx

    Is there any work around for this?

    Thank you very much for your time
  7. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1502 posts

    Posted 21 May 2013 Link to this post

    Hello Marcelino,

    I am sorry to say that the intelligent labels functionality is not supported by the RadHtmlChart. What I can suggest you to do in your case is to use the TextStyle property of the labels and set an appropriate margin/padding to them.

    For example:
    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server">
        <PlotArea>
            <Series>
                <telerik:ColumnSeries Stacked="true">
                    <Items>
                        <telerik:SeriesItem YValue="11" />
                        <telerik:SeriesItem YValue="11" />
                        <telerik:SeriesItem YValue="11" />
                    </Items>
                    <LabelsAppearance>
                        <TextStyle Margin="5" />
                    </LabelsAppearance>
                </telerik:ColumnSeries>
                <telerik:ColumnSeries>
                    <Items>
                        <telerik:SeriesItem YValue="12" />
                        <telerik:SeriesItem YValue="12" />
                        <telerik:SeriesItem YValue="12" />
                    </Items>
                    <LabelsAppearance>
                        <TextStyle Margin="10" />
                    </LabelsAppearance>
                </telerik:ColumnSeries>
                <telerik:ColumnSeries>
                    <Items>
                        <telerik:SeriesItem YValue="13" />
                        <telerik:SeriesItem YValue="13" />
                        <telerik:SeriesItem YValue="13" />
                    </Items>
                    <LabelsAppearance>
                        <TextStyle Margin="17" />
                    </LabelsAppearance>
                </telerik:ColumnSeries>
            </Series>
            <YAxis MaxValue="1000">
            </YAxis>
        </PlotArea>
    </telerik:RadHtmlChart>

    I hope that helps.

    All the best,
    Danail Vasilev
    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.
  9. Marcelino
    Marcelino avatar
    4 posts
    Member since:
    Jul 2012

    Posted 21 May 2013 Link to this post

    Thank you very much for your suggestion it helped.

    Any plans to get the intelligent labels on the html chart?
  11. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1502 posts

    Posted 23 May 2013 Link to this post

    Hi Marcelino,

    Intelligent labels functionality is not in the scope of our short term plans. However, I have logged this idea in our feedback portal here, so that you can monitor and comment on it. For the time being you can raise the priority of this item by voting on it.

    As a small token of gratitude for sharing your ideas with us I have updated your Telerik points.

    You can also find interesting the release notes of the HtmlChart in Q2 2013 Beta.

    Regards,
    Danail Vasilev
    Telerik
    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.
  13. Siva
    Siva avatar
    7 posts
    Member since:
    Jan 2018

    Posted 06 Mar 2019 Link to this post

    Hi,

    Am working with telerik:RadHtmlchart with scattered line series

    In that i have created two series with same x and y axis

    its working fine until the two series have same values

    if purchase series x=5 y=10, sales series x=10 y=20 then its working fine

    if purchase series x=5 y=10, sales series x=5 y=10 then its overlapping one on other, there is no differentiation between two series

    its displaying 1 tooltip only for sales series

     

    after that

    i want to display integers only but when am using dataformat it will show like 0 0 0  1  1 1

    but i don't want to display like this because it's look like duplicating the values

    is there any way to show those series seperately or need to display two tooltips?

    and for avoiding decimals and duplicating axis values any way to solve this issue?

    how i need to do that, am trying to fix this issue for the past two day still i can't find the solution

     

    Thanks,

    Regards,

    SIVASHANKARI

     

      

     

  14.
Back to Top