Set different line width of legend item

[Peter]

Hi,

it is possible to set the line width in the legend?

The second green line should have the double width of the first line. https://dojo.telerik.com/uGabOFUr

Peter

[Tsvetina]

Hello Peter,

You can achieve this with a custom visual for the legend items:

$("#chart").kendoChart({
  legend: {
    item: {
      visual: function (e) {
        var color = e.options.markers.background;
        var labelColor = e.options.labels.color;
        var rect = new kendo.geometry.Rect([0, 0], [100, 50]);
        var layout = new kendo.drawing.Layout(rect, {
          spacing: 5,
          alignItems: "center"
        });
        var lineWidth = e.series.name == "Series 1" ? 4: 8;
        var marker = new kendo.drawing.Path({
          fill: {
            color: color
          },
          stroke: {
            width: 0
          }
        }).moveTo(0, 0).lineTo(20, 0).lineTo(20, lineWidth).lineTo(0, lineWidth).close();

        var label = new kendo.drawing.Text(e.series.name, [0, 0], {
          fill: {
            color: labelColor
          }
        });

        layout.append(marker, label);
        layout.reflow()

        return layout;
      }
    }
  },
  series: [
    { name: "Series 1", data: [1, 2, 3] },
    { name: "Series 2", data: [3, 4, 5] }
  ]
});

You can see the result in this Dojo:
https://dojo.telerik.com/iSUPiwAB

Regards,
Tsvetina
Progress Telerik

[Peter]

Hello Tsvetina,
perfect! I need some modifications for my typescript file, see comments:

item: {
     visual: function (e) {
         var color = e.options.markers.background;
         var labelColor = e.options.labels.color;
         //to avoid line breaks set rect width to 200
         var rect = new kendo.geometry.Rect([0, 0], [200, 10]);
         var layout = new kendo.drawing.Layout(rect, { spacing: 5, alignItems: "center" });
         //original size of legend line: 15 x 3
         //double line width from series #3
         var lineWidth = e.series.index >= 2 ? 6 : 3;
         var marker = new kendo.drawing.Path({ fill: { color: color }, stroke: { width: 0 } })
             .moveTo(0, 0).lineTo(15, 0).lineTo(15, lineWidth).lineTo(0, lineWidth).close();
         //kendo.drawing.Text is defined: constructor(content: string, position: kendo.geometry.Point, options?: TextOptions);
         // use new kendo.geometry.Point
         var label = new kendo.drawing.Text(e.series.name, new kendo.geometry.Point(0, 0), {
             fill: {color: labelColor}
         });
         // typescript definition of layout.append has only one argument, so ignore error
         //@ts-ignore
         layout.append(marker, label);
         layout.reflow()
         return layout;
     }
 }

 

Possible you can make an issue for kendo.all.d.ts (line 8911 in class Group extends kendo.drawing.Element)
to avoid the use of //@ts-ignore ?

Best regards,

Peter

 

[Tsvetina]

Hi Peter,

Thank you for sharing your solution. Indeed, the append method definition supports a single argument in the current TypeScript definitions. We will update them for the service pack release. In the meantime, you can append the items one by one to avoid the use of //@ts-ignore:

layout.append(marker);
layout.append(label);

This will work in the same way as appending them with one method call.

Regards,
Tsvetina
Progress Telerik