Line break in category label of kendo-ui chart

Question

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?

Dorkus

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 – Olio

UserVoice request. – Mylor

Answer 1

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

Olmos

Thanks for this, i had "solved" it by putting the newline text in the tooltip. I'll look into using this solution. – Dorkus

Answer 2

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!

Metaphrast

In which version (version number?) did this get introduced? I see it here in Q2 2014 Beta as "Multi-line labels" : telerik.com/support/whats-new/kendo-ui/release-history/… – Loewe

Hi @TheRedPea, yes in Q2 2014. It was for ages on their roadmap. Works like a charm. PS: one undocumented feature: after wrapping, the height of the line wraps can be done with the / after the font size specs. So 36px/30; will create 36px font, but when wrapped, ugly spaces between the lines will have a line height of 30px. Don't specify the px in 30. :-) – Metaphrast