CODEWITHSUNDEEP
chartskendo-uiteleriklinechartkendo-chart
Igor Ani
Igor Ani

Reputation: 231

Kendo line chart - series name with labels in two rows

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: enter image description here

This is an example from a kendo ui homepage, here you can find the source code: link

Upvotes: 1

Views: 1240

Answers (1)

ezanker
ezanker

Reputation: 24738

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...

Upvotes: 0

Related Questions