Legend in Angular Stock chart component
27 Apr 202424 minutes to read
Legend provides information about the series rendered in the Stock Chart. Legend can be added to a Stock Chart by enabling the visible
option in the legendSettings
.
Position and Alignment
By using the position
property, legend can be placed at Left
, Right
, Top
, Bottom
or Custom
of the Stock Chart. The legend is positioned at the bottom of the Stock Chart, by default.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, StockChartAllModule, ChartAllModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, LineSeriesService} from '@syncfusion/ej2-angular-charts'
import { StockLegendService, CandleSeries } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { chartData } from './datasource';
@Component({
imports: [
ChartModule, StockChartAllModule, ChartAllModule
],
providers: [ DateTimeService, LineSeriesService, StockLegendService, CandleSeries ],
standalone: true,
selector: 'app-container',
template: `<ejs-stockchart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title' [indicatorType]='indicatorType' [trendlineType]='trendlineType' [legendSettings]='legendSettings'>
<e-stockchart-series-collection>
<e-stockchart-series [dataSource]='chartData' type='Candle' volume='volume' xName='date' low='low' high='high' open='open' close='close' name='AAPL'></e-stockchart-series>
</e-stockchart-series-collection>
</ejs-stockchart>`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public chartData?: Object[];
public title?: string;
public indicatorType: string[] = [];
public trendlineType: string[] = [];
public legendSettings?: Object;
ngOnInit(): void {
this.chartData = chartData;
this.title = 'AAPL Stock Price';
this.primaryXAxis = {
valueType: 'DateTime'
};
this.legendSettings = {
visible: true,
//Legend position as top
position:'Top'
};
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Custom
position is used to position the legend anywhere in the Stock Chart using x, y coordinates.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, StockChartAllModule, ChartAllModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, LineSeriesService} from '@syncfusion/ej2-angular-charts'
import { StockLegendService, CandleSeries } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { chartData } from './datasource';
@Component({
imports: [
ChartModule, StockChartAllModule, ChartAllModule
],
providers: [ DateTimeService, LineSeriesService, StockLegendService, CandleSeries ],
standalone: true,
selector: 'app-container',
template: `<ejs-stockchart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title' [indicatorType]='indicatorType' [trendlineType]='trendlineType' [legendSettings]='legendSettings'>
<e-stockchart-series-collection>
<e-stockchart-series [dataSource]='chartData' type='Candle' volume='volume' xName='date' low='low' high='high' open='open' close='close' name='AAPL'></e-stockchart-series>
</e-stockchart-series-collection>
</ejs-stockchart>`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public chartData?: Object[];
public title?: string;
public indicatorType: string[] = [];
public trendlineType: string[] = [];
public legendSettings?: Object;
ngOnInit(): void {
this.chartData = chartData;
this.title = 'AAPL Stock Price';
this.primaryXAxis = {
valueType: 'DateTime'
};
this.legendSettings = {
visible: true,
//Legend position as custom
position:'Custom',
location: { x: 200, y: 20 }
};
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Legend Alignment
The legend can be align as Center
, Far
or Near
to the Stock Chart using alignment
property.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, StockChartAllModule, ChartAllModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, LineSeriesService} from '@syncfusion/ej2-angular-charts'
import { StockLegendService, CandleSeries } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { chartData } from './datasource';
@Component({
imports: [
ChartModule, StockChartAllModule, ChartAllModule
],
providers: [ DateTimeService, LineSeriesService, StockLegendService, CandleSeries ],
standalone: true,
selector: 'app-container',
template: `<ejs-stockchart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title' [indicatorType]='indicatorType' [trendlineType]='trendlineType' [legendSettings]='legendSettings'>
<e-stockchart-series-collection>
<e-stockchart-series [dataSource]='chartData' type='Candle' volume='volume' xName='date' low='low' high='high' open='open' close='close' name='AAPL'></e-stockchart-series>
</e-stockchart-series-collection>
</ejs-stockchart>`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public chartData?: Object[];
public title?: string;
public indicatorType: string[] = [];
public trendlineType: string[] = [];
public legendSettings?: Object;
ngOnInit(): void {
this.chartData = chartData;
this.title = 'AAPL Stock Price';
this.primaryXAxis = {
valueType: 'DateTime'
};
this.legendSettings = {
visible: true,
position:'Bottom',
//Legend alignment as near
alignment: 'Near'
};
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Customization
To change the legend icon shape, legendShape
property in the series
can be used. By default legend icon shape is seriesType
.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, StockChartAllModule, ChartAllModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, LineSeriesService} from '@syncfusion/ej2-angular-charts'
import { StockLegendService, CandleSeries } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { chartData } from './datasource';
@Component({
imports: [
ChartModule, StockChartAllModule, ChartAllModule
],
providers: [ DateTimeService, LineSeriesService, StockLegendService, CandleSeries ],
standalone: true,
selector: 'app-container',
template: `<ejs-stockchart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title' [indicatorType]='indicatorType' [trendlineType]='trendlineType' [legendSettings]='legendSettings'>
<e-stockchart-series-collection>
<e-stockchart-series [dataSource]='chartData' type='Candle' volume='volume' xName='date' low='low' high='high' open='open' close='close' name='AAPL' legendShape='Pentagon'></e-stockchart-series>
</e-stockchart-series-collection>
</ejs-stockchart>`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public chartData?: Object[];
public title?: string;
public indicatorType: string[] = [];
public trendlineType: string[] = [];
public legendSettings?: Object;
ngOnInit(): void {
this.chartData = chartData;
this.title = 'AAPL Stock Price';
this.primaryXAxis = {
valueType: 'DateTime'
};
this.legendSettings = { visible: true };
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Legend Size
By default, legend takes 20% - 25% of the Stock Chart’s height horizontally, when it is placed on top or bottom position and 20% - 25% of the width vertically, while placing on left or right position of the Stock Chart. The default legend size can be changed by using the width
and height
property of the legendSettings
.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, StockChartAllModule, ChartAllModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, LineSeriesService} from '@syncfusion/ej2-angular-charts'
import { StockLegendService, CandleSeries } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { chartData } from './datasource';
@Component({
imports: [
ChartModule, StockChartAllModule, ChartAllModule
],
providers: [ DateTimeService, LineSeriesService, StockLegendService, CandleSeries ],
standalone: true,
selector: 'app-container',
template: `<ejs-stockchart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title' [indicatorType]='indicatorType' [trendlineType]='trendlineType' [legendSettings]='legendSettings'>
<e-stockchart-series-collection>
<e-stockchart-series [dataSource]='chartData' type='Candle' volume='volume' xName='date' low='low' high='high' open='open' close='close' name='AAPL'></e-stockchart-series>
</e-stockchart-series-collection>
</ejs-stockchart>`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public chartData?: Object[];
public title?: string;
public indicatorType: string[] = [];
public trendlineType: string[] = [];
public legendSettings?: Object;
ngOnInit(): void {
this.chartData = chartData;
this.title = 'AAPL Stock Price';
this.primaryXAxis = {
valueType: 'DateTime'
};
this.legendSettings = {
visible: true,
//Legend size for chart
width: '500', height: '50',
border: { width: 1, color: 'pink'}
};
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Legend Item Size
The size of the legend items can customized by using the shapeHeight
and shapeWidth
property.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, StockChartAllModule, ChartAllModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, LineSeriesService} from '@syncfusion/ej2-angular-charts'
import { StockLegendService, CandleSeries } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { chartData } from './datasource';
@Component({
imports: [
ChartModule, StockChartAllModule, ChartAllModule
],
providers: [ DateTimeService, LineSeriesService, StockLegendService, CandleSeries ],
standalone: true,
selector: 'app-container',
template: `<ejs-stockchart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title' [indicatorType]='indicatorType' [trendlineType]='trendlineType' [legendSettings]='legendSettings'>
<e-stockchart-series-collection>
<e-stockchart-series [dataSource]='chartData' type='Candle' volume='volume' xName='date' low='low' high='high' open='open' close='close' name='AAPL'></e-stockchart-series>
</e-stockchart-series-collection>
</ejs-stockchart>`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public chartData?: Object[];
public title?: string;
public indicatorType: string[] = [];
public trendlineType: string[] = [];
public legendSettings?: Object;
ngOnInit(): void {
this.chartData = chartData;
this.title = 'AAPL Stock Price';
this.primaryXAxis = {
valueType: 'DateTime'
};
this.legendSettings = {
visible: true,
//Legend item size
shapeHeight: 15, shapeWidth: 15
};
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Collapsing Legend Item
By default, series name will be displayed as legend. To skip the legend for a particular series, empty string to the series name can be given.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, StockChartAllModule, ChartAllModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, LineSeriesService} from '@syncfusion/ej2-angular-charts'
import { StockLegendService, CandleSeries } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { chartData } from './datasource';
@Component({
imports: [
ChartModule, StockChartAllModule, ChartAllModule
],
providers: [ DateTimeService, LineSeriesService, StockLegendService, CandleSeries ],
standalone: true,
selector: 'app-container',
template: `<ejs-stockchart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title' [indicatorType]='indicatorType' [trendlineType]='trendlineType' [legendSettings]='legendSettings'>
<e-stockchart-series-collection>
<e-stockchart-series [dataSource]='chartData' type='Candle' volume='volume' xName='date' low='low' high='high' open='open' close='close'></e-stockchart-series>
</e-stockchart-series-collection>
</ejs-stockchart>`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public chartData?: Object[];
public title?: string;
public indicatorType: string[] = [];
public trendlineType: string[] = [];
public legendSettings?: Object;
ngOnInit(): void {
this.chartData = chartData;
this.title = 'AAPL Stock Price';
this.primaryXAxis = {
valueType: 'DateTime'
};
this.legendSettings = { visible: true };
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Legend Title
The title for legend can be set using title
property in legendSettings
. Customize the fontStyle
, size
, fontWeight
, color
, textAlignment
, fontFamily
, opacity
and textOverflow
of legend title. titlePosition
is used to set the legend position in Top
, Left
and Right
position. maximumTitleWidth
is used to set the width of the legend title. By default, it will be 100px
.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, StockChartAllModule, ChartAllModule } from '@syncfusion/ej2-angular-charts'
import { DateTimeService, LineSeriesService} from '@syncfusion/ej2-angular-charts'
import { StockLegendService, CandleSeries } from '@syncfusion/ej2-angular-charts'
import { Component, OnInit } from '@angular/core';
import { chartData } from './datasource';
@Component({
imports: [
ChartModule, StockChartAllModule, ChartAllModule
],
providers: [ DateTimeService, LineSeriesService, StockLegendService, CandleSeries ],
standalone: true,
selector: 'app-container',
template: `<ejs-stockchart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title' [indicatorType]='indicatorType' [trendlineType]='trendlineType' [legendSettings]='legendSettings'>
<e-stockchart-series-collection>
<e-stockchart-series [dataSource]='chartData' type='Candle' volume='volume' xName='date' low='low' high='high' open='open' close='close' name='AAPL'></e-stockchart-series>
</e-stockchart-series-collection>
</ejs-stockchart>`
})
export class AppComponent implements OnInit {
public primaryXAxis?: Object;
public chartData?: Object[];
public title?: string;
public indicatorType: string[] = [];
public trendlineType: string[] = [];
public legendSettings?: Object;
ngOnInit(): void {
this.chartData = chartData;
this.title = 'AAPL Stock Price';
this.primaryXAxis = {
valueType: 'DateTime'
};
this.legendSettings = {
visible: true,
title: 'Countries',
titlePosition: 'Top',
titleStyle: {
fontFamily: 'verdana',
fontStyle: 'Normal',
fontWeight: 'Normal',
size: '15px',
textAlignment: 'Center',
color: 'blue',
textOverflow: 'None'
},
maximumTitleWidth: 150
};
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Note: To use legend feature, we need to inject
StockLegendService
into the@NgModule.Providers
.