This is a migrated thread and some comments may be shown as answers.

Set different line width of legend item

3 Answers 111 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Peter
Top achievements
Rank 1
Peter asked on 11 Jan 2019, 05:04 PM

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

3 Answers, 1 is accepted

Sort by
0
Accepted
Tsvetina
Telerik team
answered on 14 Jan 2019, 12:49 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Peter
Top achievements
Rank 1
answered on 14 Jan 2019, 05:05 PM

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

 

0
Tsvetina
Telerik team
answered on 15 Jan 2019, 12:22 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Charts
Asked by
Peter
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Peter
Top achievements
Rank 1
Share this question
or