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

Dash/dot/solid chart legend markers

3 Answers 159 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
esp
Top achievements
Rank 1
Veteran
esp asked on 04 Dec 2017, 01:58 AM

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

 

3 Answers, 1 is accepted

Sort by
0
Svet
Telerik team
answered on 05 Dec 2017, 01:52 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
esp
Top achievements
Rank 1
Veteran
answered on 06 Dec 2017, 11:55 PM
Thanks, that looks pretty good.
0
Svet
Telerik team
answered on 07 Dec 2017, 02:56 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
esp
Top achievements
Rank 1
Veteran
Answers by
Svet
Telerik team
esp
Top achievements
Rank 1
Veteran
Share this question
or