Legend
The Chart legend displays the name of the configured data series.
- Series without a specified name or a defined
labels.contentfunction that returns a non-empty value will not display legend items.- To render a legend item for the Pie, Donut and Funnel series, provide the items with a
categoryfield.
To customize the legend, use the kendo-chart-legend configuration component.
The following example demonstrates how to configure the position and orientation of the Chart legend.
@Component({
selector: 'my-app',
template: `
<kendo-chart>
<kendo-chart-legend position="bottom" orientation="horizontal">
</kendo-chart-legend>
<kendo-chart-series>
<kendo-chart-series-item name="Fibonacci" [data]="seriesData">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
class AppComponent {
public seriesData: number[] = [1, 2, 3, 5];
}Hiding the Legend
If you set the series names, the Chart displays a default legend.
The following example demonstrates how to hide the legend by using its visible property.
@Component({
selector: 'my-app',
template: `
<kendo-chart>
<kendo-chart-legend [visible]="false">
<!-- ^^^^^^^^^
Note the binding is required,
otherwise the property will be
bound to a 'false' string.
-->
</kendo-chart-legend>
<kendo-chart-series>
<kendo-chart-series-item name="Fibonacci" [data]="seriesData">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
class AppComponent {
public seriesData: number[] = [1, 2, 3, 5];
}Clicking Legend Items
Default Behavior
Clicking the legend items toggles the visibility of the clicked series. To disable or customize this behavior, cancel the legendItemClick event.
The following example demonstrates how to build in the toggle feature by binding the series visibility to a controller field.
@Component({
selector: 'my-app',
template: `
<kendo-chart (legendItemClick)="onLegendItemClick($event)">
<kendo-chart-series>
<kendo-chart-series-item name="Fibonacci" [data]="seriesData"
[visible]="seriesVisible">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
class AppComponent {
public seriesData: number[] = [1, 2, 3, 5];
public seriesVisible: boolean = true;
public onLegendItemClick(e): void {
/* Do not hide the series on legend click */
e.preventDefault();
/* Hide the series manually */
this.seriesVisible = !this.seriesVisible;
}
}Inline Series
If the Chart series are declared as plain objects, the default click action is not available.
The following example demonstrates how to toggle the series visibility by replacing the series definition. If you remove the legendItemClick handler, the series visibility will not change when the legend item is clicked.
@Component({
selector: 'my-app',
template: `
<kendo-chart [series]="series" (legendItemClick)="onLegendItemClick($event)">
<!-- ^^^^^^^^^^^^^^^^^
The series are defined as a plain object -->
</kendo-chart>
`
})
export class AppComponent {
public series: any[] = [{ name: "Fibonacci", data: [1, 2, 3, 5], visible: true }];
public seriesVisible: boolean = true;
public onLegendItemClick(e): void {
/* Compute the new visibility value from the current series */
const visible = !this.series[0].visible;
/*
Replace the series instance as the Chart uses OnPush
change detection strategy and won't detect object mutations.
*/
this.series = [{ name: "Fibonacci", data: [1, 2, 3, 5], visible: visible }];
}
}Customizing the Position
It is possible to remove the legend from the flow and to absolutely position it by setting the position to custom and configuring the offsetX and offsetY options.
@Component({
selector: 'my-app',
template: `
<kendo-chart>
<kendo-chart-legend position="custom" [offsetX]="40" [offsetY]="25">
</kendo-chart-legend>
<kendo-chart-series>
<kendo-chart-series-item name="Fibonacci" [data]="seriesData">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
class AppComponent {
public seriesData: number[] = [1, 2, 3, 5];
}Setting a Title
The Chart legend section can be configured to hold a title with customizable layout and content.
To define a title, provide a LegendTitle object to the legend configuration.
import { Component } from '@angular/core';
import { LegendTitle } from '@progress/kendo-angular-charts';
@Component({
selector: 'my-app',
template: `
<kendo-chart>
<kendo-chart-title
[text]="'Gross domestic product growth /GDP annual %/'"
>
</kendo-chart-title>
<kendo-chart-legend
[title]="legendTitle"
[position]="'right'"
>
</kendo-chart-legend>
<kendo-chart-series>
<kendo-chart-series-item
*ngFor="let item of series"
[type]="'line'"
[name]="item.name"
[data]="item.data"
>
</kendo-chart-series-item>
</kendo-chart-series>
<kendo-chart-category-axis>
<kendo-chart-category-axis-item
[categories]="categories"
>
</kendo-chart-category-axis-item>
</kendo-chart-category-axis>
</kendo-chart>
`
})
export class AppComponent {
public series: any[] = [{
name: 'India',
data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
}, {
name: 'Russian Federation',
data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
}, {
name: 'Germany',
data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995]
}];
public categories: number[] = [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011];
public legendTitle: LegendTitle = {
text: 'Countries',
font: '18px Arial'
};
}
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';
import 'hammerjs';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';
enableProdMode();
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);