Adding Common Legends to Single-Series Charts

Environment

Description

How can I add a common legend for two or more single-series charts like Pie, Donut, or Funnel, instead of having separate legends for each chart?

Solution

1. Add a new chart with same categories but set their values to zero so that only the legends are seen.

   Copy Code<kendo-chart>
     <kendo-chart-legend position="top"></kendo-chart-legend>
     <kendo-chart-series>
       <kendo-chart-series-item type="pie"
             [data]="[
                 { category: 'A', value: 0 },
                 { category: 'B', value: 0 },
                 { category: 'C', value: 0 }
               ]"
             field="value"
             categoryField="category">
       </kendo-chart-series-item>
     </kendo-chart-series>
   </kendo-chart>

2. Add the legendItemClickEvent to the legend-only chart.

   Copy Code<kendo-chart (legendItemClick)="click($event)">
   </kendo-chart>

3. Add Template Reference Variables to the SeriesItemComponent of the all charts.

   Copy Code<kendo-chart>
     <kendo-chart-series>
       <kendo-chart-series-item #chartSeries1>
       </kendo-chart-series-item>
     </kendo-chart-series>
   </kendo-chart>

4. Add ViewChild for the Template Reference Variable.

   Copy Code@ViewChild("chartSeries1") public toggleChartSeries1: any;

5. Use the togglePointVisibility method in the ViewChild variables during the legendItemClick event.

   Copy Codepublic click(e: LegendItemClickEvent): void {
     this.toggleChartSeries1.togglePointVisibility(e.pointIndex);
   }

The following example demonstrates the full implementation of the suggested approach.

See Also

• legendItemClickEvent
• Template Reference Variables
• SeriesItemComponent
• ViewChild
• togglePointVisibility