Progress® Telerik® UI for ASP.NET AJAX Feedback Portal
Back to Feed
Request a Feature Report a Bug
Declined
Last Updated: 16 Jul 2019 12:46 by ADMIN
ADMIN
Danail Vasilev
Created on: 23 May 2013 13:40
Category: HtmlChart
Type: Feature Request
21
ADD Intelligent labels functionality to RadHtmlChart
Similar to the RadChart's http://demos.telerik.com/aspnet-ajax/chart/examples/newfeatures/intelligentlabels/defaultcs.aspx For the time being you can implement a custom logic for offsetting y point positions of labels. For example offset every 2nd item label position:
       <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<script>
			function pageLoad() {
				offsetItemLabels();
			}
			function offsetItemLabels() {
				//Find all text elements on the page
				var textElements = document.getElementsByTagName("text");
				var numSeriesItemLabels = 0;
				//Iterate through the text elements
				for (var i = 0; i < textElements.length; i++) {
					var currTextEl = textElements[i];
					//Set the desired string/symbol that represents the series labels
					var SeriesLabelSymbol = "@SL";
					if (currTextEl.textContent.indexOf(SeriesLabelSymbol) != -1) {
						numSeriesItemLabels++;
						var currText = currTextEl.textContent.split(SeriesLabelSymbol);
						//Offset y point for every 2nd item label
						currTextEl.textContent = currText[1];
						if ((numSeriesItemLabels) % 2 == 0) {
							currTextEl.attributes.y.textContent = currTextEl.attributes.y.textContent * 1 + 35;
						}
					}
				}
			}
		</script>
        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px">
            <ChartTitle Text="Chart title">
            </ChartTitle>
            <PlotArea>
                <Series>
                    <telerik:LineSeries Name="Series 1">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="18" />
                            <telerik:CategorySeriesItem Y="18" />
                            <telerik:CategorySeriesItem Y="18" />
                            <telerik:CategorySeriesItem Y="18" />
                        </SeriesItems>
                        <LabelsAppearance>
                            <ClientTemplate>
@SLCategory is #=category# Value is: #=value#
                            </ClientTemplate>
                        </LabelsAppearance>
                    </telerik:LineSeries>
                </Series>
                <XAxis>
                    <Items>
                        <telerik:AxisItem LabelText="item 1" />
                        <telerik:AxisItem LabelText="item 2" />
                        <telerik:AxisItem LabelText="item 3" />
                        <telerik:AxisItem LabelText="item 4" />
                    </Items>
                </XAxis>
            </PlotArea>
        </telerik:RadHtmlChart>
12 comments
ADMIN
Rumen
Posted on: 16 Jul 2019 12:46
Hi there,

As of R3 2018 (version 2018.3.910), there is now a property for the axis labels so they can be above/below the chart so this does not happen -

Check out these demos for more information - https://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/negativevalues/defaultcs.aspx and https://demos.telerik.com/aspnet-ajax/htmlchart/examples/appearance/configuringappearance/defaultcs.aspx. 
 


Regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Frank
Posted on: 16 Jul 2019 08:26

Very much needed, indeed!

E.g. horizontal BarSeries with positive, negative and null valueshave different issues depending on the BarColumnLabelsPosition-setting.

Generally if you have comparably small and large values, both positive and negative, any value-label will clip into its own text-label.

Kasim
Posted on: 30 Apr 2018 11:25 
Very much needed.
ADMIN
Marin Bratanov
Posted on: 11 Oct 2017 08:23 
This feature has high complexity and may cause regressions, while its impact is relatively small. Thus, it will not be implemented.
Daniel
Posted on: 31 Aug 2016 10:51 
Very much needed
x
Posted on: 25 Jul 2016 13:38 
Clear Axis labels (no overlap) in a chart is not a nice to have feature that we need to vote on.  The development of the htmlchart is not finished and is not yet ready to be on the market. As it has been noted by other users, the developper has better to do than wasting his time to adjust labels in the chart. So please finish you nice work and make intelligent labels available in htmchart.
Thank you for your time and help
Best regrads
AE
Jason M
Posted on: 14 Jun 2016 23:03 
This is a short coming of the RadHtmlChart, this seems like a no brainer for a data visualization control. The whole idea is to streamline the amount of custom code developers have to write. Even in the demos this crops up when you mess with the label position. The demo developers did not want to write custom logic to position their labels either. :) Please add this feature.
Blair
Posted on: 20 Jan 2016 17:07 
Disappointed that it's been two years and this is still not an option.

One of the examples you use on your site is the Range Bar chart here: 

http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/chart-types/range-bar-chart

If I choose "OutsideEnd" for a line that ends at 20:00 the label is missing.  If I choose "InsideEnd" for a range that is shorter than the label width there is ugly text overlap or some of the text is outside of the bar.

I don't think it's much to ask for at least one of the following:
- Control label background color so labels that cross the bar are legible
- Control labels per range series instead of per range
- Control label width to force wrap
- Somehow render the control just slightly bigger than the plot area so that labels aren't cut off, without increasing the Y axis
Abdul
Posted on: 06 Jul 2015 06:01 
LabelsAppearance.Position for the series should have "Auto" as a selection.
It would be really nice to have feature that would intelligently set the label position without overlapping any of the display content for the end user.
Phil
Posted on: 12 Sep 2014 13:53 
Since this feature was in the RadChart, which is no longer, it's hard to believe that it was not incorporated into the replacement RadHtmlChart.  This should not even require a vote to be a "added"...it should be a "fix".  What good is a chart if you can't read the data?????
x
Posted on: 09 Apr 2014 18:16 
Adding Intelligent labels functionnality will certainly impove the chart display and open a new perspectives for the users. In our case the length of xlables is not fixed in advance (dynamic chart) , adding intelligent labels will help us.

Thank you for help and your time
Best regrads 
AE
Chad
Posted on: 08 Nov 2013 05:21 
Very much needed this functionality with HTML Charts.
Create an account Log In
View
Type
Status
Category