New to Kendo UI for Angular? Start a free 30-day trial

Adding Common Legends to Single-Series Charts

Environment

ProductProgress® Kendo UI® for Angular Charts

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.

    ```html
    <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.

    ```html
    <kendo-chart (legendItemClick)="click($event)">
    </kendo-chart>
    ```
  3. Add Template Reference Variables to the SeriesItemComponent of the all charts.

    ```html
    <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.

    ```typescript
    @ViewChild("chartSeries1") public toggleChartSeries1: any;
    ```
  5. Use the togglePointVisibility method in the ViewChild variables during the legendItemClick event.

    ```typescript
    public click(e: LegendItemClickEvent): void {
      this.toggleChartSeries1.togglePointVisibility(e.pointIndex);
    }
    ```

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

Example
View Source
Edit In Stackblitz  
Change Theme:

See Also

In this article

Not finding the help you need?