Displaying Text before the Legend Items in the Chart

Environment

Product

Progress® Kendo UI® for Angular Charts

Description

How can I show some text before all the legend items in the Kendo UI for Angular Chart?

Solution

1. Add an item in the series with the text you want to display, and set the visibility of the series to false.

   html

   <kendo-chart-series-item name="Days in Progress" [visible]="false">
   </kendo-chart-series-item>

2. The previous step will not result in showing any data or space in the Chart, but the color of the legend will be lightened. To set the color of the inactive legend items, use the following snippet.

   html

   <kendo-chart-legend-inactive-items [labels]="{color: 'black'}">
   </kendo-chart-legend-inactive-items>

3. To prevent the user from toggling the legend item, use the LegendItemClickEvent to preventDefault.

   html

   <kendo-chart (legendItemClick)="onLegendItemClick($event)"> </kendo-chart>

   typescript

   public onLegendItemClick(e: LegendItemClickEvent): void {
     if(e.seriesIndex===0)
       e.preventDefault();
   }

4. To hide the marker for the particular legend and prevent the color setup of the other legend items to black when disabled, use the visual property in the LegendItemComponent to create a custom visual.

   html

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

   ts

   public visual(e: LegendItemVisualArgs): void{
       // draw custom legend
   }

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

Change Theme

Theme

Loading ...

See Also

• SeriesItemComponent
• visual (SeriesItemComponent)
• LegendInactiveItemsComponent
• LegendItemClickEvent
• visual (LegendItemComponent)
• LegendItemComponent