Kendo legend: label on the left, color on the right

Question

I have a kendogram in my js code. By default, the layout of the legend area is that there is a list of colors and to the right of each color there is a label with the name of the series. I want to change the order: first put the shortcut, and then the color of the second and align it to the right.

I think the best way to do this is legend.item, but I don't know how to do it.

see current status:

and here is a demonstration of what I want to be:

Answer 1

You can create a visual visual legend using the methods of the Kendo legend.

legend: { item: { visual: function (e) { // get the default color for the legend shape var color = e.options.markers.background; // get the default color for the legend text var labelColor = e.options.labels.color; // bounds of the legend var rect = new kendo.geometry.Rect([0, 0], [100, 50]); var layout = new kendo.drawing.Layout(rect, { spacing: 5, alignItems: "center" }); // Recreate the legend shape (can be any shape) var marker = new kendo.drawing.Path({ fill: { color: color } }).moveTo(10, 0).lineTo(15, 10).lineTo(5, 10).close(); // recreate the label text var label = new kendo.drawing.Text(e.series.name, [0, 0], { fill: { color: labelColor } }); // This is the key part: it draws the label first then the shape layout.append(label, marker); layout.reflow() return layout; } } 

An important part of this code is this part:

  layout.append(label, marker); 

Since we first specify the label, then the marker, the label should appear first.

I don't have jsFiddle setting for this, but Kendo has an example in their dojo: http://dojo.telerik.com/OdiNi

Answer 2

In this case, you will hide the legend.

 legend: { visible: false }, 

And create your own html legend.