Completed
Last Updated: 13 Sep 2018 12:40 by ADMIN
ADMIN
Danail Vasilev
Created on: 16 Jan 2013 14:11
Category: HtmlChart
Type: Feature Request
15
ADD the ability to handle long labels and titles in RadHtmlChart
LineBreak is not supported by SVG (more on that - http://www.w3.org/TR/SVG11/text.html#Introduction) and RadHtmlChart uses SVG to render in modern browsers. Add the ability to handle long label text in SVG as well. Currently long strings are getting clipped. 

For the time being the labels can be manually split in separate text elements. For example:
		<script>
			function pageLoad() {
				wrapLabels();
			}
			function wrapLabels() {
				//Find all text elements on the page
				var textElements = document.getElementsByTagName("text");
				//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 line break
					var lineBreakSymbol = "@LineBreak@";
					if (currTextEl.textContent.indexOf(lineBreakSymbol) != -1) {
						var lines = currTextEl.textContent.split(lineBreakSymbol);
						//Adjust the x and y coordinates for the new text element from the old one
						var textAlignCoefficient = 7;
						var x = currTextEl.attributes.x.textContent * 1 + lines[1].length * textAlignCoefficient;
						var y = currTextEl.attributes.y.textContent * 1 + 20;
						//Obtain the same style for the new text element from the old one
						var style = currTextEl.attributes.style.textContent;
						//Add the new SVG text element
						addSVGTextElement(currTextEl, x, y, style, lines[1]);
						//Adjust the text and the position for the old text element
						currTextEl.textContent = lines[0];
						currTextEl.attributes.x.textContent = currTextEl.attributes.x.textContent * 1 + lines[1].length * textAlignCoefficient;
					}
				}
			}
			function addSVGTextElement(placeHolder, x, y, style, text) {
				var newText = document.createElementNS("http://www.w3.org/2000/svg", "text");

				newText.setAttributeNS(null, "x", x);
				newText.setAttributeNS(null, "y", y);
				newText.setAttributeNS(null, "style", style);

				var textNode = document.createTextNode(text);
				newText.appendChild(textNode);
				placeHolder.parentNode.insertBefore(newText, placeHolder);
			}
		</script>
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px">
			<ChartTitle Text="Chart title @LineBreak@ more text in title">
			</ChartTitle>
			<PlotArea>
				<Series>
					<telerik:ColumnSeries Name="Series 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="30" />
							<telerik:CategorySeriesItem Y="10" />
							<telerik:CategorySeriesItem Y="20" />
						</SeriesItems>
						<LabelsAppearance>
							<ClientTemplate>
Category is #=category#@LineBreak@Value is: #=value#
							</ClientTemplate>
						</LabelsAppearance>
					</telerik:ColumnSeries>
				</Series>
				<XAxis>
					<Items>
						<telerik:AxisItem LabelText="item 1" />
						<telerik:AxisItem LabelText="item 2" />
						<telerik:AxisItem LabelText="item 3" />
					</Items>
				</XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>
(Total attached files size should be smaller than 20mb. Allowed extensions: .zip, .rar, .jpg, .png, .gif)
12 comments
ADMIN
Marin Bratanov
Posted on: 05 Jan 2018 20:28
Adding a line break character ("\n") is the only supported option at the moment.
The other idea I can offer is to increase the chart height so there is more room for a large title.
A third option you can consider is adding an external HTML element outside of the chart that will hold the desired title (e.g., with a CSS3 rotation transform so it is vertical) and align it next to the chart.
Praveen
Posted on: 05 Jan 2018 16:55
Do we have any recent fix to wrap/stop truncation or we have to use \n only ?
Khadeer
Posted on: 08 Jul 2015 13:59
Do we have any fix in the latest release
Bryan
Posted on: 30 Jun 2015 20:20
How would I accomplish this if I am passing in the text from a sql query? Adding \n or \\n to my text causes the chart to not render
Matt
Posted on: 23 Nov 2014 03:40
Ah yes ofcourse \\n did the trick thank you.
ADMIN
Danail Vasilev
Posted on: 12 Nov 2014 07:12
Hi Matt,  when you use the escaping backslash symbol in the code behind you must use another backslash symbol before it - the first one escapes the second one on the server, so the one that remains escapes the subsequent symbol on the client-side. More information is available in the http://www.telerik.com/help/aspnet-ajax/htmlchart-troubleshooting-escaping-special-symbols.html help article.
Matt
Posted on: 12 Nov 2014 00:48
Upgraded to 2014.3.1024.45

Just tried the \n fix does'nt work just makes the chart not display at all

  BoxPlotChart.PlotArea.XAxis.Items.Add(new AxisItem("thisisalong \n wordtest"));
ADMIN
Danail Vasilev
Posted on: 15 Aug 2014 06:21
Hi Taulant,
Yes, the labels' line breaking feature will be implemented in the RadHtmlChart in Q3 2014.
Taulant
Posted on: 13 Aug 2014 12:50
Hi Mr. Danail Vasilev.

I wanted to ask you, will the line breaking option also be included in Telerik UI fro ASP.nET AJAX in the RadHtmlChart ??

Thank you in advance
ADMIN
Danail Vasilev
Posted on: 04 Aug 2014 11:13
Hi Guys, the feature will be implemented in Q3 2014 and not in Q2 2014 SP1 as stated earlier. Please excuse us for the misleading information.
ADMIN
Danail Vasilev
Posted on: 04 Jul 2014 12:24
The feature will be completed for Q2 2014 SP1. The characters used for the line breaks are "\n". You can see an example in the KendoUI charting widget http://trykendoui.telerik.com/OQiC
wei
Posted on: 22 Mar 2014 07:16
i also have this problem, so pls remind me when it will be have done, tks