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

Stacked Column series item label getting overlapping

6 Answers 189 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Kannan
Top achievements
Rank 1
Kannan asked on 22 Nov 2012, 04:34 AM
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

6 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 26 Nov 2012, 03:17 PM
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.
0
Marcelino
Top achievements
Rank 1
answered on 16 May 2013, 11:00 PM
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
0
Danail Vasilev
Telerik team
answered on 21 May 2013, 02:20 PM
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.
0
Marcelino
Top achievements
Rank 1
answered on 21 May 2013, 04:02 PM
Thank you very much for your suggestion it helped.

Any plans to get the intelligent labels on the html chart?
0
Danail Vasilev
Telerik team
answered on 23 May 2013, 01:47 PM
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.
0
Siva
Top achievements
Rank 1
answered on 06 Mar 2019, 07:16 AM

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

 

  

 

Tags
Chart (HTML5)
Asked by
Kannan
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Marcelino
Top achievements
Rank 1
Siva
Top achievements
Rank 1
Share this question
or