Displaying Text before the Legend Items in the Chart

Environment

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.

   Copy Code<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.

   Copy Code<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.

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

   Copy Codepublic 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.

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

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

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

See Also

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