Home/ Questions/Q 9098257
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T00:19:07+00:00

I have a chart where the labels contain two parts, a name an a

  • 0

I have a chart where the labels contain two parts, a name an a number.
I want the number to appear below the name, illustrated by the <br/> tag:

line break

I load the contents of the chart, and set the label in my controller:
label

When i try to use a template on the label, the text after the line break appears at the bottom of the chart along with the rest of the text of the chart:

enter image description here

javascript code:

$("#chart1").kendoChart({
        theme: "BlueOpal",
        title: { text: "My reported hours" },
        legend: { position: "bottom" },
        seriesDefaults: { type: "column" },
        dataSource: {
            transport: {
                read: {
                    url: dataUrl,
                    dataType: "json"
                }
            }
        },
        series: [{ field: "SeriesField" }],
        categoryAxis: {
            field: "CategoryAxis",
            labels: {
                rotation: 0,
                template: "#=value#<br/>newline"
            },

        },
        valueAxis: {
            labels: { format: "{0}h" },
            min: 0
        },
        tooltip: {
            visible: true,
            template: "#= formatDecimal(value) #<br/> newline"
        },
        seriesClick: onSeriesClick
    });

How do i make the line break work?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    SEE UPDATE AT THE END, THIS IS NOW POSSIBLE… Leaving the below as I think it’s still relevant.

    There is an alternative if you don’t need the location of the label to be “Dynamic” (i.e. there are multiple labels that need to have specific positions).

    You can use the <tspan> element.

    As Kendo renders the old school SVG rather than the HTML5 Canvas, html tags don’t work. You have to use SVG tags. These are not great as the SVG 1.1 spec doesn’t easily allow for text wrapping. The recommendation for text wrapping in SVGs is the tspan.

    e.g.

    <tspan x="30" dy="0" text-anchor="middle">Test</tspan>
<tspan x="30" dy="1.5em"text-anchor="middle">Other 7</tspan>

    if you set the above as your label, it will get you closer, but until Kendo upgrade to HTML5 technologies like Canvas (highly unlikely), or SVG 1.2 comes in (August 2014) as this brings <tbreak/>, this is about the best we have.

    There is also another problem in that the rendering of the chart doesn’t appear to take into account the graphical representation of the text, so you might get some unwanted clipping.

    UPDATE (17/01/2014)

    According to this UserVoice http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/3434807-chart-multi-line-labels

    They are planning to implement the functionality in Q1 2014, I’ll update the answer once it’s generally available.

    UPDATE (27/04/2014)
    They’ve said that this will now be planned for after Q1… who knows when now… oh well…

    UPDATE (09/01/2015)
    Confirmed it works in Kendo UI v2014.3.1119 with “\n”. See documentation: http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.title.text

    • 0