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

Stacked Charts with Intelligent Labels?

1 Answer 91 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Marcelino
Top achievements
Rank 1
Marcelino asked on 17 May 2013, 06:45 PM
Hello,
First I meant " Stacked Columns", instead of " Stacked Charts"  (Could not edit the title)

This is a very similar case as in : Stacked Column series item label getting overlapping

Problem:
For one particular case when there are stacked columns with high amounts and some columns with very low amounts, causing the ratio to set smaller 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, to get more room for columns to be larger.
3) Smaller Font.

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

Is there any work around for this? or future release for this feature?

I am currently using latest version 2013.1 417 (April 17)

Thank you very much for your time

1 Answer, 1 is accepted

Sort by
0
Accepted
Danail Vasilev
Telerik team
answered on 21 May 2013, 02:23 PM
Hi Marcelino,

I have already answered your question in this forum thread, so I paste my replay in this forum thread as well:

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.
<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>



Greetings,
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.
Tags
Chart (HTML5)
Asked by
Marcelino
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Share this question
or