Kendo line chart - series name with labels in two rows - charts

Question

I would like to know if it's possible to have line chart series names divided in two rows, with a label in addition (Group1 and Group2 from the photo). On the picture below you can see what I want to create.
If not, is it at least possible to divide series names in two rows (without labels)?
Here is the photo:
This is an example from a kendo ui homepage, here you can find the source code: link

Answer 1

I think you would need to play around with the legend width and the legend item visual:
DEMO
legend: {
position: "bottom",
width: 360,
item: {
visual: function (e) {
console.log(e);
var group = "";
var rect = new kendo.geometry.Rect([0, 0], [140, 50]);
if (e.series.name == "1. GOOG (close)"){
group = "Group 1: ";
rect = new kendo.geometry.Rect([0, 0], [200, 50]);
} else if (e.series.name == "3. AMZN (close)"){
group = "Group 2: ";
rect = new kendo.geometry.Rect([0, 0], [200, 50]);
}
var color = e.options.markers.background;
var labelColor = e.options.labels.color;
var layout = new kendo.drawing.Layout(rect, {
spacing: 5,
alignItems: "center"
});
var grplabel = new kendo.drawing.Text(group, [0, 0], {
fill: {
color: "#000"
}
});
var marker = new kendo.drawing.Path({
fill: {
color: color
},
stroke : {
color: color
}
}).moveTo(10, 0).lineTo(10, 10).lineTo(0, 10).lineTo(0, 0).close();
var label = new kendo.drawing.Text(e.series.name, [0, 0], {
fill: {
color: labelColor
}
});
layout.append(grplabel, marker, label);
layout.reflow()
return layout;
}
}
},
In the demo, I am checking the series name and adding the group label to the first and third series. The the legend width is set so that it wraps to a second line. NOTE: there is some trial and error to make this work with your data...