Completed
Last Updated: 06 Sep 2018 11:17 by ADMIN
ADMIN
Danail Vasilev
Created on: 01 Aug 2013 16:07
Category: HtmlChart
Type: Feature Request
31
ADD Top and Bottom Positions for Axes / Axes Labels in RadHtmlChart
In scenarios where the Series are Column/Bar and Positive and Negative values are present, the XAxis labels are overlapped by the Series themselves. Expose an additional Position property for the axis labels that controls their position to Top/Bottom. 

For the time being you can choose either approach:

1) Use a second x-axis that stores only the labels:

a) Category Axis example:
		<script>
			function BottomXAxisLabels() {
				var chart = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget();
				var axis = $telerik.$.extend(true, {}, chart.options.categoryAxis);
				axis.line.visible = false;
				chart.setOptions({ categoryAxis: [{}, axis] });
				chart.options.valueAxis.axisCrossingValues = [0, -99999999999];
				chart.redraw();
			}
		</script>
		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
			<ClientEvents OnLoad="BottomXAxisLabels" />
			<PlotArea>
				<Series>
					<telerik:ColumnSeries Name="Product 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="15000" />
							<telerik:CategorySeriesItem Y="-4000" />
							<telerik:CategorySeriesItem Y="10000" />
						</SeriesItems>
					</telerik:ColumnSeries>
				</Series>
				<XAxis>
					<Items>
						<telerik:AxisItem LabelText="1" />
						<telerik:AxisItem LabelText="2" />
						<telerik:AxisItem LabelText="3" />
					</Items>
				</XAxis>
			</PlotArea>
			<ChartTitle Text="Product sales for 2011">
			</ChartTitle>
			<Legend>
				<Appearance Position="Bottom" />
			</Legend>
		</telerik:RadHtmlChart>

b) Numeric axis example:
<script>
			function BottomXAxisLabels() {
				var chart = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget();
			    var axis = $telerik.$.extend(true, {}, chart.options.xAxis);
				axis.line.visible = false;
				chart.setOptions({ xAxis: [{ labels: { visible: false }}, axis] });
				chart.options.yAxis.axisCrossingValues = [0, -99999999999];
				chart.redraw();
			}
		</script>
		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
			<ClientEvents OnLoad="BottomXAxisLabels" />
			<PlotArea>
				<Series>
					<telerik:ScatterLineSeries Name="Product 1">
						<SeriesItems>
							<telerik:ScatterSeriesItem Y="15000" X="5" />
							<telerik:ScatterSeriesItem Y="-4000" X="6" />
							<telerik:ScatterSeriesItem Y="10000" X="7"/>
						</SeriesItems>
					</telerik:ScatterLineSeries>
				</Series>
			</PlotArea>
			<ChartTitle Text="Product sales for 2011">
			</ChartTitle>
			<Legend>
				<Appearance Position="Bottom" />
			</Legend>
		</telerik:RadHtmlChart>

2) Use the TextStyle property of the RadHtmlChart , in order to set higher margin for the XAxis labels. For example:

		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px">
			<PlotArea>
				<Series>
					<telerik:ColumnSeries Name="Product 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="15000" />
							<telerik:CategorySeriesItem Y="-4000" />
							<telerik:CategorySeriesItem Y="10000" />
						</SeriesItems>
					</telerik:ColumnSeries>
				</Series>
				<XAxis>
					<LabelsAppearance>
						<TextStyle Margin="135 0 0 0" />
					</LabelsAppearance>
					<Items>
						<telerik:AxisItem LabelText="item1" />
						<telerik:AxisItem LabelText="item2" />
						<telerik:AxisItem LabelText="item3" />
					</Items>
				</XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>

Note: Labels margin and chart's PlotArea height are inversely proportional - the higher the margin is the lower the chart's PlotArea height will be. This resizing is needed, in order for the chart's main dimensions to be kept.
16 comments
ADMIN
Rumen
Posted on: 05 Sep 2018 12:44
Hi there, 

The feature is planned for the upcoming R3 2018 release, to be out next week. 
You will find examples of it in the 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 demos.
peter sorensen
Posted on: 17 Jul 2017 16:06
Please regard this as a bug, and fix it !

As Justin said, all other component suppliers seem to have no problem with this, in their chart solutions.
Josh
Posted on: 24 Mar 2017 14:55
4 years later and this issue still occurs.

Can ANYONE point me to a charting solution where there are negative values and the X-Axis labels are overlayed by the plot area itself?

I was told that this was "expected behavior".  Expected by the Developers, but not any consumer or viewer of the Chart.

A human-readable chart should have the axis labels BENEATH the plot area.  THAT should be the "expected behavior".
Josh
Posted on: 24 Mar 2017 14:55
deleted by janderson
Courtney
Posted on: 02 Jan 2017 18:03
Did anyone ever fix the issue that James and Jaydip pointed out?  

i.e. After implementing example 1 (above), when clicking on a series, the get_category() method is returning undefined?
ADMIN
Danail Vasilev
Posted on: 25 Mar 2016 12:59
Since the RadHtmlChart is an ASP.NET server-side wrapper of the Kendo UI charting widgets, you may also raise the priority of the following Kendo UI feature request equivalent - http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/2920960-bar-char-baseline-label-positions-bottom-top-wh . Once the feature is implemented in the Kendo UI chart it can be easily configured/implemented in the RadHtmlChart as well.
James
Posted on: 25 Mar 2016 11:46
Sorry I mispoke in my last comment, the get_dataItem() function is working correctly, it's the get_category() method which is returning undefined.
James
Posted on: 25 Mar 2016 11:40
Suggestion #1 works quite well visually, but I can concur with Jaydip's comment regarding the series click returning undefined.  the get_category() method is returning the x-axis value for the point as expected, however the get_dataItem() function is returning undefined.
Rahul
Posted on: 28 Dec 2015 11:21
I used first approach this works perfectly but now i am facing one issue, whenever user click on any series i am getting category as undefined. Please let me know what i am missing.
Thanks  
ADMIN
Marin Bratanov
Posted on: 08 Jul 2014 06:24
Hello Martin.
I completely agree with you that the HtmlChart control offers a huge performance gain and this is one of the major reasons for its introduction. We are trying to put the features from RadChart in RadHtmlChart but this will take some time and since we have over 80 other controls to develop, priorities are not that simple to set.
RadChart's support will officially end with the Q3 2014 release as noted here: http://blogs.telerik.com/aspnet-ajax/posts/14-02-06/radhtmlchart-vs-radchart-round3-radchart-is-obsolete and I hope this blog will clarify some of doubts.
Martin
Posted on: 08 Jul 2014 05:57
Marin, While the RadChart may be available, it is deprecated which means support may cease at any time.

Additionally, the performance differences are such that going back is no longer an option. We have charts that took over 30 seconds to render that now take 1 second. RadChart had horrible performance when rendering over 200 points with labels.

With that stated, I wish to reiterate that this should be a no-brainer to prioritize for implementation along with any other items that provide full feature parity for RadHtmlChart vs. RadChart.
ADMIN
Marin Bratanov
Posted on: 08 Jul 2014 05:43
Martin, I just wanted to note the RadChart will not be removed from the assembly, so it will still be available should you decide to use it.
Martin
Posted on: 12 May 2014 13:40
This seems like a no-brainer when it comes to feature parity with RadChart that has been deprecated and removed soon.
Robert Veach
Posted on: 04 Dec 2013 14:05
I think this would be excellent as it can get messy otherwise.
ADMIN
Danail Vasilev
Posted on: 14 Nov 2013 14:43
Hi Juergen, I have renamed this item with the provided suggestion.
Jürgen
Posted on: 14 Nov 2013 12:08
Why only axis labels position? The whole axis like wpf!