javascript - kendo chart legend : label at left, color at right

Question

I have kendo-chart at my js code. By default, the legend area layout is that, there is list of colors, and the right of every color - there is label with series name. I want to reverse the order: put label first, and color second, and align it to right.

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

see the current state:

and here is demo of what I want will be:

Answer 1

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

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;
      }
    }

The important part of this code is this part:

 layout.append(label, marker);

Because we're specifying the label first, then the marker, the label should appear first.

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