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:

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

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:

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?

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:

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

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:

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?

• javascript
• asp.net-mvc
• kendo-ui
• kendo-chart

• Multi-line labels are not supported yet. Please, feel free to cast your vote for this feature on UserVoice - feedback.kendoui.com/forums/127393-kendo-ui-feedback – Tsvetomir Tsonev Commented Dec 6, 2012 at 9:15
• UserVoice request. – Roatin Marth Commented Mar 12, 2013 at 10:55

2 Answers 2

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

Finally implemented by Telerik

See http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.title.text

The text can be split into multiple lines by using line feed characters ("\n").

Happens to text, titles, labels, notes anywere!