Question

I’m replacing DotNet Charting charts with KendoUI. I need to be able to put a multiple line label on a line chart. See the image below with the red circle on the label. Any suggestions would be greatly appreciated.

See my current chart and the DotNet Cart I need to replace:

Answer 1

Short answer: you can’t.

Long answer: You can’t, but you there is a bug in Kendo that will let you… sort of.

Kendo is creating an SVG on the fly for your chart. SVGs are just XML, and you can inject XML into the element via the javascript config.

For your label, you have to use elements to position text. See the SVG spec for this element: http://www.w3.org/TR/SVG/text.html#TSpanElement

The problem here is that Kendo uses left-justified text, and you can’t change the parent element with this bug. That means you have to offset everything by hand, one pixel at a time. If your text is static, this might work; if it is dynamic, I wouldn’t even attempt it.

You might be able to hack something together via JS, and manipulate the SVG on the fly each time Kendo modifies it… but you may as well write a charting library if you’re going to that much work.

EDIT: For your use, it might be better to rotate the labels, if you don’t have to mirror the old display exactly.