newline support in labelappearance

Thread is closed for posting
4 posts, 0 answers
  1. Menaka
    Menaka avatar
    1 posts
    Member since:
    Apr 2011

    Posted 07 Sep 2013 Link to this post

    Hi,

    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.

    Below is the full code:

     <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

     

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 11 Sep 2013 Link to this post

    Hello Menaka,

    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
    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 the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Matt
    Matt avatar
    21 posts
    Member since:
    Apr 2014

    Posted 02 May 2014 Link to this post

    Has a workaround for this been found?
    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>


  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 07 May 2014 Link to this post

    Hello Matt,

    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.

     
Back to Top