Is <br/> tag supported in LabelsAppearance tag? I added a <br/> tag in LabelAppearance and it doesn't work in the same way as it works in TooltipsAppearance
The following line does not work:
<LabelsAppearance Position="Circle" ClientTemplate="#=dataItem.department# <br/>$#=dataItem.amount#M (#=dataItem.percent#%)" > </LabelsAppearance>
LabelsAppearance works fine if I remove the <br/> tag.
<telerik:RadHtmlChart runat="server" ID="PieChart1" Width="800" Height="550" Transitions="true"
Skin="Forest">
<Appearance>
<FillStyle BackgroundColor="White"></FillStyle>
</Appearance>
<ChartTitle Text="Total: $2,694,491,736">
<Appearance Align="Center" BackgroundColor="White" Position="Bottom">
</Appearance>
</ChartTitle>
<Legend>
<Appearance BackgroundColor="White" Position="Right" Visible="true">
</Appearance>
</Legend>
<PlotArea>
<Appearance>
<FillStyle BackgroundColor="White"></FillStyle>
</Appearance>
<Series>
<telerik:PieSeries StartAngle="90" DataFieldY="percent" ColorField="customcolor">
<LabelsAppearance Position="Circle" ClientTemplate="#=dataItem.department# $#=dataItem.amount#M (#=dataItem.percent#%)" >
</LabelsAppearance>
<TooltipsAppearance ClientTemplate="#=dataItem.department#<br/>$#=dataItem.amount#M (#=dataItem.percent#%)"></TooltipsAppearance>
</telerik:PieSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
Thanks
3 Answers, 1 is accepted
I am sorry to say that currently the RadHtmlChart doesn't support line breaks in its labels. This limitation is a consequence of a limitation in SVG. More information on the matter can be found in this feedback item. The exception is the ToolTIps which use entirely HTML, so that <br> tags can be used.
The good news, however, is that our developers are currently working on overcoming this limitation, so that if everything is fine it may be implemented in some of our next releases.
Regards,
Danail Vasilev
Telerik
Rank 1
I was trying to use ASCII line feed characters 10 and 13...
http://www.theasciicode.com.ar/ascii-control-characters/carriage-return-ascii-code-13.html
Couldn't get that to work in IE or Chrome.
Also, is there a way to set the text alignment of the labels?
Obviously this is pointless unless there are line breaks.
I was using a DIV in the ClientTemplate but that only works in IE (prolly for the same reasons the <BR/> doesn't work in chrome (see example below).
Thanks!
-Matt
<telerik:RadHtmlChart runat="server" ID="SavingsSummaryChart" Width="270" Height="140"> <ChartTitle><Appearance Visible="false" /></ChartTitle> <Legend><Appearance Visible="false" /></Legend> <PlotArea> <Series> <telerik:ColumnSeries DataFieldY="Total" ColorField="Color"> <LabelsAppearance Visible="true" Position="OutsideEnd"> <ClientTemplate><div style="text-align:center;font-size:10px">#=dataItem.Label#</div></ClientTemplate> </LabelsAppearance> <TooltipsAppearance Visible="false" /> </telerik:ColumnSeries> </Series> <XAxis Visible="false"> <MajorGridLines Visible="false"></MajorGridLines> <MinorGridLines Visible="false"></MinorGridLines> </XAxis> <YAxis Visible="false"> <MajorGridLines Visible="false"></MajorGridLines> <MinorGridLines Visible="false"></MinorGridLines> </YAxis> </PlotArea></telerik:RadHtmlChart>I am sorry to say that desired functionality is not implemented in the RadHtmlChart yet because our developers are working on tasks with higher priority.
For the time being you can choose a line break symbol/string and manually split the labels. For example:
ASPX:
<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 = document.getElementsByTagName("text")[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"> <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>I have also updated the feedback item with this example.
Regards,
Danail Vasilev
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.