Legend in React Stock chart component
18 Nov 201824 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 * as React from "react";
import * as ReactDOM from "react-dom";
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend } from '@syncfusion/ej2-react-charts';
import { chartData } from '../datasource';
function App() {
const primaryXAxis = {
valueType: 'DateTime',
};
const crosshair = { enable: true };
const tooltip = { enable: true };
const legendSettings = { visible: true, position: 'Top' };
return <StockChartComponent id='stockcharts' primaryXAxis={primaryXAxis} crosshair={crosshair} tooltip={tooltip} legendSettings={legendSettings} indicatorType={[]} trendlineType={[]} height='350' title='AAPL Stock Price'>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export, StockLegend, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]}/>
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} type='Candle' name='AAPL'>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, CrosshairSettingsModel,TooltipSettingsModel }
from'@syncfusion/ej2-react-charts';
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend } from '@syncfusion/ej2-react-charts';
import { chartData } from '../datasource';
function App() {
const primaryXAxis: AxisModel= {
valueType: 'DateTime',
};
const crosshair: CrosshairSettingsModel ={ enable: true } ;
const tooltip: TooltipSettingsModel ={ enable: true } ;
const legendSettings: LegendSettingsModel = { visible: true, position: 'Top' };
return <StockChartComponent id='stockcharts'
primaryXAxis={ primaryXAxis }
crosshair={crosshair}
tooltip={tooltip}
legendSettings={legendSettings}
indicatorType={[]}
trendlineType ={[]}
height='350'
title='AAPL Stock Price'>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines,EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export, StockLegend, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]}/>
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} type='Candle' name='AAPL'>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Custom position is used to position the legend anywhere in the Stock Chart using x, y coordinates.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend } from '@syncfusion/ej2-react-charts';
import { chartData } from '../datasource';
function App() {
const primaryXAxis = {
valueType: 'DateTime',
};
const crosshair = { enable: true };
const tooltip = { enable: true };
const legendSettings = { visible: true, position: 'Custom', location: { x: 200, y: 20 } };
return <StockChartComponent id='stockcharts' primaryXAxis={primaryXAxis} crosshair={crosshair} tooltip={tooltip} legendSettings={legendSettings} indicatorType={[]} trendlineType={[]} height='350' title='AAPL Stock Price'>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export, StockLegend, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]}/>
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} type='Candle' name='AAPL'>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, CrosshairSettingsModel,TooltipSettingsModel }
from'@syncfusion/ej2-react-charts';
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend } from '@syncfusion/ej2-react-charts';
import { chartData } from '../datasource';
function App() {
const primaryXAxis: AxisModel= {
valueType: 'DateTime',
};
const crosshair: CrosshairSettingsModel ={ enable: true } ;
const tooltip: TooltipSettingsModel ={ enable: true } ;
const legendSettings: LegendSettingsModel = { visible: true, position:'Custom', location: { x: 200, y: 20 } };
return <StockChartComponent id='stockcharts'
primaryXAxis={ primaryXAxis }
crosshair={crosshair}
tooltip={tooltip}
legendSettings={legendSettings}
indicatorType={[]}
trendlineType ={[]}
height='350'
title='AAPL Stock Price'>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines,EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export, StockLegend, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]}/>
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} type='Candle' name='AAPL'>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Legend Alignment
The legend can be align as Center, Far or Near to the Stock Chart using alignment property.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend } from '@syncfusion/ej2-react-charts';
import { chartData } from '../datasource';
function App() {
const primaryXAxis = {
valueType: 'DateTime',
};
const crosshair = { enable: true };
const tooltip = { enable: true };
const legendSettings = { visible: true, position: 'Bottom', alignment: 'Near' };
return <StockChartComponent id='stockcharts' primaryXAxis={primaryXAxis} crosshair={crosshair} tooltip={tooltip} legendSettings={legendSettings} indicatorType={[]} trendlineType={[]} height='350' title='AAPL Stock Price'>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export, StockLegend, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]}/>
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} type='Candle' name='AAPL'>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, CrosshairSettingsModel,TooltipSettingsModel }
from'@syncfusion/ej2-react-charts';
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend } from '@syncfusion/ej2-react-charts';
import { chartData } from '../datasource';
function App() {
const primaryXAxis: AxisModel= {
valueType: 'DateTime',
};
const crosshair: CrosshairSettingsModel ={ enable: true } ;
const tooltip: TooltipSettingsModel ={ enable: true } ;
const legendSettings: LegendSettingsModel = { visible: true, position:'Bottom', alignment: 'Near' };
return <StockChartComponent id='stockcharts'
primaryXAxis={ primaryXAxis }
crosshair={crosshair}
tooltip={tooltip}
legendSettings={legendSettings}
indicatorType={[]}
trendlineType ={[]}
height='350'
title='AAPL Stock Price'>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines,EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export, StockLegend, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]}/>
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} type='Candle' name='AAPL'>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Customization
To change the legend icon shape, legendShape property in the series can be used. By default legend icon shape is seriesType.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend } from '@syncfusion/ej2-react-charts';
import { chartData } from '../datasource';
function App() {
const primaryXAxis = {
valueType: 'DateTime',
};
const crosshair = { enable: true };
const tooltip = { enable: true };
const legendSettings = { visible: true };
return <StockChartComponent id='stockcharts' primaryXAxis={primaryXAxis} crosshair={crosshair} tooltip={tooltip} legendSettings={legendSettings} indicatorType={[]} trendlineType={[]} height='350' title='AAPL Stock Price'>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export, StockLegend, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]}/>
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} type='Candle' name='AAPL' legendShape='Pentagon'>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, CrosshairSettingsModel,TooltipSettingsModel }
from'@syncfusion/ej2-react-charts';
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend } from '@syncfusion/ej2-react-charts';
import { chartData } from '../datasource';
function App() {
const primaryXAxis: AxisModel= {
valueType: 'DateTime',
};
const crosshair: CrosshairSettingsModel ={ enable: true } ;
const tooltip: TooltipSettingsModel ={ enable: true } ;
const legendSettings: LegendSettingsModel = { visible: true };
return <StockChartComponent id='stockcharts'
primaryXAxis={ primaryXAxis }
crosshair={crosshair}
tooltip={tooltip}
legendSettings={legendSettings}
indicatorType={[]}
trendlineType ={[]}
height='350'
title='AAPL Stock Price'>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines,EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export, StockLegend, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]}/>
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} type='Candle' name='AAPL' legendShape= 'Pentagon'>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));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 * as React from "react";
import * as ReactDOM from "react-dom";
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend } from '@syncfusion/ej2-react-charts';
import { chartData } from '../datasource';
function App() {
const primaryXAxis = {
valueType: 'DateTime',
};
const crosshair = { enable: true };
const tooltip = { enable: true };
const legendSettings = { visible: true, width: '500', height: '50', border: { width: 1, color: 'pink' } };
return <StockChartComponent id='stockcharts' primaryXAxis={primaryXAxis} crosshair={crosshair} tooltip={tooltip} legendSettings={legendSettings} indicatorType={[]} trendlineType={[]} height='350' title='AAPL Stock Price'>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export, StockLegend, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]}/>
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} type='Candle' name='AAPL'>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, CrosshairSettingsModel,TooltipSettingsModel }
from'@syncfusion/ej2-react-charts';
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend } from '@syncfusion/ej2-react-charts';
import { chartData } from '../datasource';
function App() {
const primaryXAxis: AxisModel= {
valueType: 'DateTime',
};
const crosshair: CrosshairSettingsModel ={ enable: true } ;
const tooltip: TooltipSettingsModel ={ enable: true } ;
const legendSettings: LegendSettingsModel = { visible: true, width: '500', height: '50', border: { width: 1, color: 'pink'} };
return <StockChartComponent id='stockcharts'
primaryXAxis={ primaryXAxis }
crosshair={crosshair}
tooltip={tooltip}
legendSettings={legendSettings}
indicatorType={[]}
trendlineType ={[]}
height='350'
title='AAPL Stock Price'>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines,EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export, StockLegend, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]}/>
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} type='Candle' name='AAPL'>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Legend Item Size
The size of the legend items can customized by using the shapeHeight and shapeWidth property.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend } from '@syncfusion/ej2-react-charts';
import { chartData } from '../datasource';
function App() {
const primaryXAxis = {
valueType: 'DateTime',
};
const crosshair = { enable: true };
const tooltip = { enable: true };
const legendSettings = { visible: true, shapeHeight: 15, shapeWidth: 15 };
return <StockChartComponent id='stockcharts' primaryXAxis={primaryXAxis} crosshair={crosshair} tooltip={tooltip} legendSettings={legendSettings} indicatorType={[]} trendlineType={[]} height='350' title='AAPL Stock Price'>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export, StockLegend, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]}/>
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} type='Candle' name='AAPL'>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, CrosshairSettingsModel,TooltipSettingsModel }
from'@syncfusion/ej2-react-charts';
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend } from '@syncfusion/ej2-react-charts';
import { chartData } from '../datasource';
function App() {
const primaryXAxis: AxisModel= {
valueType: 'DateTime',
};
const crosshair: CrosshairSettingsModel ={ enable: true } ;
const tooltip: TooltipSettingsModel ={ enable: true } ;
const legendSettings: LegendSettingsModel = { visible: true, shapeHeight: 15, shapeWidth: 15 };
return <StockChartComponent id='stockcharts'
primaryXAxis={ primaryXAxis }
crosshair={crosshair}
tooltip={tooltip}
legendSettings={legendSettings}
indicatorType={[]}
trendlineType ={[]}
height='350'
title='AAPL Stock Price'>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines,EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export, StockLegend, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]}/>
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} type='Candle' name='AAPL'>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));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 * as React from "react";
import * as ReactDOM from "react-dom";
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend } from '@syncfusion/ej2-react-charts';
import { chartData } from '../datasource';
function App() {
const primaryXAxis = {
valueType: 'DateTime',
};
const crosshair = { enable: true };
const tooltip = { enable: true };
const legendSettings = { visible: true };
return <StockChartComponent id='stockcharts' primaryXAxis={primaryXAxis} crosshair={crosshair} tooltip={tooltip} legendSettings={legendSettings} indicatorType={[]} trendlineType={[]} height='350' title='AAPL Stock Price'>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export, StockLegend, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]}/>
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} type='Candle'>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, CrosshairSettingsModel,TooltipSettingsModel }
from'@syncfusion/ej2-react-charts';
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend } from '@syncfusion/ej2-react-charts';
import { chartData } from '../datasource';
function App() {
const primaryXAxis: AxisModel= {
valueType: 'DateTime',
};
const crosshair: CrosshairSettingsModel ={ enable: true } ;
const tooltip: TooltipSettingsModel ={ enable: true } ;
const legendSettings: LegendSettingsModel = { visible: true };
return <StockChartComponent id='stockcharts'
primaryXAxis={ primaryXAxis }
crosshair={crosshair}
tooltip={tooltip}
legendSettings={legendSettings}
indicatorType={[]}
trendlineType ={[]}
height='350'
title='AAPL Stock Price'>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines,EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export, StockLegend, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]}/>
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} type='Candle'>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));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 * as React from "react";
import * as ReactDOM from "react-dom";
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend } from '@syncfusion/ej2-react-charts';
import { chartData } from '../datasource';
function App() {
const primaryXAxis = {
valueType: 'DateTime',
};
const crosshair = { enable: true };
const tooltip = { enable: true };
const legendSettings = { visible: true, title: 'Countries', titlePosition: 'Top', titleStyle: { fontFamily: 'verdana', fontStyle: 'Normal', fontWeight: 'Normal', size: '15px', textAlignment: 'Center', color: 'blue', textOverflow: 'None' }, maximumTitleWidth: 150 };
return <StockChartComponent id='stockcharts' primaryXAxis={primaryXAxis} crosshair={crosshair} tooltip={tooltip} legendSettings={legendSettings} indicatorType={[]} trendlineType={[]} height='350' title='AAPL Stock Price'>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export, StockLegend, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]}/>
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} type='Candle' name='AAPL'>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, CrosshairSettingsModel,TooltipSettingsModel }
from'@syncfusion/ej2-react-charts';
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend } from '@syncfusion/ej2-react-charts';
import { chartData } from '../datasource';
function App() {
const primaryXAxis: AxisModel= {
valueType: 'DateTime',
};
const crosshair: CrosshairSettingsModel ={ enable: true } ;
const tooltip: TooltipSettingsModel ={ enable: true } ;
const legendSettings: LegendSettingsModel = { visible: true, title: 'Countries', titlePosition: 'Top', titleStyle: { fontFamily: 'verdana', fontStyle: 'Normal', fontWeight: 'Normal', size: '15px', textAlignment: 'Center', color: 'blue', textOverflow: 'None' }, maximumTitleWidth: 150 };
return <StockChartComponent id='stockcharts'
primaryXAxis={ primaryXAxis }
crosshair={crosshair}
tooltip={tooltip}
legendSettings={legendSettings}
indicatorType={[]}
trendlineType ={[]}
height='350'
title='AAPL Stock Price'>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines,EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export, StockLegend, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]}/>
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} type='Candle' name='AAPL'>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));## Legend Template
Legend templates allow you to replace default legend icons and text with custom HTML.This enables branded styles, richer content (icons, multi-line text, badges), improved readability, and localization.The rendered content becomes the legend item and can be styled with CSS.
You can customize the legend items by using the template property of legendSettings. Legend interactions (click to toggle series) remain unless [ToggleVisibility] (https://ej2.syncfusion.com/react/documentation/api/stock-chart/legendsettings#togglevisibility) is set to false. Templates work with all legend positions, alignments, and paging.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend } from '@syncfusion/ej2-react-charts';
import { chartData } from '../datasource';
const iconMap = {
'Google': 'https://img.icons8.com/?size=100&id=110580&format=png&color=000000',
'MicrosoftEdge': 'https://img.icons8.com/?size=100&id=4rcnsWVaR2ja&format=png&color=000000'
};
function App() {
const primaryXAxis = {
valueType: 'DateTime',
majorTickLines: { color: 'transparent', width: 0 }
};
const primaryYAxis = {
lineStyle: { color: 'transparent' },
majorTickLines: { color: 'transparent', width: 0 }
};
const LegendTemplate = (props) => {
const seriesName = props.series.name;
const icon = iconMap[seriesName] || '';
return (
<div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: 5, cursor: 'pointer' }}>
<img
src={icon}
width={24}
height={24}
style={{ objectFit: 'contain', borderRadius: 2 }}
alt={seriesName}
/>
<span style={{ fontSize: 13, fontWeight: 500 }}>{seriesName}</span>
</div>
);
};
const legendSettings = {
visible: true,
template: LegendTemplate
};
return <StockChartComponent id='stockcharts' height='455px' primaryXAxis={primaryXAxis} primaryYAxis={primaryYAxis} legendSettings={legendSettings} indicatorType={[]} trendlineType={[]} title='AAPL Stock Price'>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export, StockLegend, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]} />
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} type='Candle' name='Google'>
</StockChartSeriesDirective>
<StockChartSeriesDirective dataSource={chartData} type='Candle' name='MicrosoftEdge'>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { StockChartComponent, StockChartSeriesCollectionDirective, StockChartSeriesDirective, Inject, DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, AxisModel, LegendSettingsModel } from '@syncfusion/ej2-react-charts';
import { EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend } from '@syncfusion/ej2-react-charts';
import { chartData } from '../datasource';
const iconMap: { [key: string]: string } = {
'Google': 'https://img.icons8.com/?size=100&id=110580&format=png&color=000000',
'MicrosoftEdge': 'https://img.icons8.com/?size=100&id=4rcnsWVaR2ja&format=png&color=000000'
};
function App() {
const primaryXAxis: AxisModel = {
valueType: 'DateTime',
majorTickLines: { color: 'transparent', width: 0 }
};
const primaryYAxis: AxisModel = {
lineStyle: { color: 'transparent' },
majorTickLines: { color: 'transparent', width: 0 }
};
const LegendTemplate = (props: any) => {
const seriesName = props.series.name;
const icon = iconMap[seriesName] || '';
return (
<div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: 5, cursor: 'pointer' }}>
<img
src={icon}
width={24}
height={24}
style={{ objectFit: 'contain', borderRadius: 2 }}
alt={seriesName}
/>
<span style={{ fontSize: 13, fontWeight: 500 }}>{seriesName}</span>
</div>
);
};
const legendSettings: LegendSettingsModel = {
visible: true,
template: LegendTemplate
};
return <StockChartComponent id='stockcharts' height='455px' primaryXAxis={primaryXAxis} primaryYAxis={primaryYAxis} legendSettings={legendSettings} indicatorType={[]} trendlineType={[]} title='AAPL Stock Price'>
<Inject services={[DateTime, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export, StockLegend, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]} />
<StockChartSeriesCollectionDirective>
<StockChartSeriesDirective dataSource={chartData} type='Candle' name='Google'>
</StockChartSeriesDirective>
<StockChartSeriesDirective dataSource={chartData} type='Candle' name='MicrosoftEdge'>
</StockChartSeriesDirective>
</StockChartSeriesCollectionDirective>
</StockChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Note: To use legend feature, we need to inject
StockLegendmodule into theservices.