Creating a Custom Legend for the Chart

Environment

Product

Progress® Kendo UI® for Angular Chart

Description

How can I create a custom legend for the Kendo UI for Angular Chart?

Solution

To achieve the desired scenario:

1. Create your own custom legend layout with the desired styling, icons, text, and so on. For demonstration purposes, this example uses a simple HTML list with SVGIcons and a few custom styles.

   html

   <ul class="legend">
     <li
       *ngFor="let item of data; let index = index"
       class="legend-item"
       [class.legend-item-inactive]="!item.active"
       (click)="toggleSeries(item, index)"
       (mouseenter)="toggleSeriesHighlight(true, item.kind)"
       (mouseleave)="toggleSeriesHighlight(false, item.kind)"
     >
       <kendo-svg-icon [icon]="item.svgIcon" size="small" [style.color]="item.color"></kendo-svg-icon>
       <span class="legend-marker"></span>
       {{ item.kind }}
     </li>
   </ul>

2. Toggle the point visibility of the corresponding series in the Chart by handling the click event of the HTML list element.

   typescript

   public toggleSeries(item: EnergyData, index: number): void {
       this.animateChart = false;
       this.series.togglePointVisibility(index);
   
       item.active = !item.active;
   }

3. Toggle the highlight of the corresponding series in the Chart by handling the mouseenter and mouseleave events of the HTML list element.

   typescript

   public toggleSeriesHighlight(isHighlighted: boolean, category: string): void {
       this.chart.toggleHighlight(isHighlighted, (p) => p.category === category);
   }

The following example demonstrates the suggested approach.

Change Theme

Theme

Loading ...