Dash/dot/solid chart legend markers

[esp]

Is it possible to render the legend marker as a line matching the dash types (i.e. dot, dash, solid).

 

In this plunker for instance, two line series have the same colour but differentiate on dash type and I want the legend to reflect that.

 

http://plnkr.co/edit/SRAahc7NN9LRDiq9EfLt?p=preview

 

[Svet]

Hi,

Thank you for the provided sample plunker demonstrating the desired behavior.

That can be achieved using the [item] input property of the Legend component in combination with Kendo Drawing API. Please check the following sample plunker demonstrating this approach:

http://plnkr.co/edit/Hg2J63gjYQaGNtHuwOUf?p=preview

The important parts are marked in red below:

...
<kendo-chart-legend position="bottom" orientation="horizontal" [item]="{ visual: legendItemVisual }"
></kendo-chart-legend>
...

public legendItemVisual = (args: any) => {
    const path = new Path({ stroke: { color: args.series.color, dashType: args.series.dashType, width: 2}})
      .moveTo(0, 0).lineTo(25);
    const text = new Text(args.series.name);
    const layout = new Layout(new Rect([0, 0], [Number.MAX_VALUE, 0]), {
      alignItems: "center",
      cursor: 'pointer',
      spacing: 5
    });

    layout.append(path, text);
    layout.reflow();

    return layout;
  }

Unfortunately, there is no such out-of-the-box functionality. If you have the time I would ask you to log a new feature request in our User Voice portal, from which we get ideas for new features and enhancements of Kendo UI for Angular.

I hope this helps.

Regards,
Svetlin
Progress Telerik

[esp]

Thanks, that looks pretty good.

[Svet]

Hi,

I am glad that the suggested solution satisfies the requirements.

I will set this case to solved now. Please feel free to reopen this thread, by sending a new message to it, in case further assistance is required.

Regards,
Svetlin
Progress Telerik