Kendo Chart Column Multi-Line Labels

Question

I recently inherited a project that makes extensive use of Kendo charts, with a request to add some information to column labels. The labels currently contain an integer and a percentage, and the revision would add an additional percentage value. Since the labels are getting a little long, they need to be split across multiple lines.

So a column label that currently reads:

3, 0.00%

would now read

3

0.00%

9.99%

The code is arranged MVC style, so the code determining each label looks similar to the following:

.Labels(labels => labels.Visible(true).Position(ChartBarLabelsPosition.OutsideEnd)
                        .Template("#= value #, #= kendo.format('{0:P}', dataItem.GetPercent)#"))
                        .Tooltip(t => t.Template("#=series.name#: #= value #, #= kendo.format('{0:P}', dataItem.GetPercent)#").Visible(true));

It seems like this should be a simple thing, but I can't find the syntax for properly working line breaks into the labels. Kendo does seem to attempt to interpret <br /> entries, but these disrupt the flow of the chart and cause all following label values to be displayed below the entire chart rather than in place just above the column. Some forum posts I have searched assert that this is not currently possible in Kendo, but also mention that it 'will be possible in 2014' (most of these are older posts though, and since I don't know much about kendo, I could be misunderstanding which labels they are referring to).

Can anyone provide me with the proper syntax for inserting a line break into this type of label (from code) or a possible workaround if the functionality is not currently supported?

Thank you!

UPDATE I have found the <tspan> workaround, which does help a little but still looks pretty bad since my charts are resized dynamically with the page (so, for a stacked bar chart, the widths and starting positions of each column are not static). The <tspan> tag respects the y coordinate of each label but not its x coordinate, so that has to be set individually for each column; if left unset, the labels for all columns will appear at the leftmost side of the chart where the y axis values are. Since the charts are dynamic, there is no "correct" static value to put there and I have been unable to find a way to fetch a column's starting position from within the template code. Is there any way to correct this such that the <tspan> workaround becomes a viable option?

(Workaround found here)

Answer 1

From 2014-Q2 versions, Telerik / KendoUI finaly implemented the \n See the documentation:

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

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