Legend in Vue Stock chart component
3 Mar 202324 minutes to read
Legend provides information about the series rendered in the Stock Chart which can be customized using legend properties. 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.
<template>
<div class="control-section">
<div>
<ejs-stockchart
id="stockchartcontainer"
:primaryXAxis="primaryXAxis"
:primaryYAxis="primaryYAxis"
:tooltip="tooltip"
:legendSettings="legendSettings"
:indicatorType="indicatorType"
:trendlineType="trendlineType"
:crosshair="crosshair"
:title="title">
<e-stockchart-series-collection>
<e-stockchart-series :dataSource="seriesData" 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>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { chartData } from "./datasource.js";
import {
StockChartPlugin, DateTime, CandleSeries, RangeTooltip, LineSeries,SplineSeries,
HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator,BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator,Tooltip,
Crosshair,AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
} from "@syncfusion/ej2-vue-charts";
Vue.use(StockChartPlugin);
export default {
data() {
return {
seriesData:chartData,
trendlineType:[],
indicatorType:[],
primaryXAxis: {
valueType: "DateTime",
majorGridLines: { color: "transparent" },
},
primaryYAxis: {
majorTickLines: { color: "transparent", width: 0 }
},
crosshair: {
enable: true,
},
tooltip: { enable: true },
legendSettings: {
visible: true,
//Legend position as top
position:'Top'
},
title: 'AAPL Stock Price',
};
},
provide: {
stockChart: [
DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, Tooltip,
Crosshair,BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator,Export, StockLegend
]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
-
Custom
position is used to position the legend anywhere in the Stock Chart using x, y coordinates.
<template>
<div class="control-section">
<div>
<ejs-stockchart
id="stockchartcontainer"
:primaryXAxis="primaryXAxis"
:primaryYAxis="primaryYAxis"
:tooltip="tooltip"
:legendSettings="legendSettings"
:indicatorType="indicatorType"
:trendlineType="trendlineType"
:crosshair="crosshair"
:title="title">
<e-stockchart-series-collection>
<e-stockchart-series :dataSource="seriesData" 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>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { chartData } from "./datasource.js";
import {
StockChartPlugin, DateTime, CandleSeries, RangeTooltip, LineSeries,SplineSeries,
HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator,BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator,Tooltip,
Crosshair,AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
} from "@syncfusion/ej2-vue-charts";
Vue.use(StockChartPlugin);
export default {
data() {
return {
seriesData:chartData,
trendlineType:[],
indicatorType:[],
primaryXAxis: {
valueType: "DateTime",
majorGridLines: { color: "transparent" },
},
primaryYAxis: {
majorTickLines: { color: "transparent", width: 0 }
},
crosshair: {
enable: true,
},
tooltip: { enable: true },
legendSettings: {
visible: true,
//Legend position as custom
position:'Custom',
location: { x: 200, y: 20 } },
title: 'AAPL Stock Price',
};
},
provide: {
stockChart: [
DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, Tooltip,
Crosshair,BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator,Export, StockLegend
]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Legend Alignment
The legend can be align as Center
, Far
or Near
to the chart using alignment
property.
<template>
<div class="control-section">
<div>
<ejs-stockchart
id="stockchartcontainer"
:primaryXAxis="primaryXAxis"
:primaryYAxis="primaryYAxis"
:tooltip="tooltip"
:legendSettings="legendSettings"
:indicatorType="indicatorType"
:trendlineType="trendlineType"
:crosshair="crosshair"
:title="title">
<e-stockchart-series-collection>
<e-stockchart-series :dataSource="seriesData" 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>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { chartData } from "./datasource.js";
import {
StockChartPlugin, DateTime, CandleSeries, RangeTooltip, LineSeries,SplineSeries,
HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator,BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator,Tooltip,
Crosshair,AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
} from "@syncfusion/ej2-vue-charts";
Vue.use(StockChartPlugin);
export default {
data() {
return {
seriesData:chartData,
trendlineType:[],
indicatorType:[],
primaryXAxis: {
valueType: "DateTime",
majorGridLines: { color: "transparent" },
},
primaryYAxis: {
majorTickLines: { color: "transparent", width: 0 }
},
crosshair: {
enable: true,
},
tooltip: { enable: true },
legendSettings: {
visible: true,
position:'Bottom',
//Legend alignment as near
alignment: 'Near'
},
title: 'AAPL Stock Price',
};
},
provide: {
stockChart: [
DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, Tooltip,
Crosshair,BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator,Export, StockLegend
]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Customization
To change the legend icon shape, legendShape
property in the series
can be used. By default legend icon shape is seriesType
.
<template>
<div class="control-section">
<div>
<ejs-stockchart
id="stockchartcontainer"
:primaryXAxis="primaryXAxis"
:primaryYAxis="primaryYAxis"
:tooltip="tooltip"
:legendSettings="legendSettings"
:indicatorType="indicatorType"
:trendlineType="trendlineType"
:crosshair="crosshair"
:title="title">
<e-stockchart-series-collection>
<e-stockchart-series :dataSource="seriesData" 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>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { chartData } from "./datasource.js";
import {
StockChartPlugin, DateTime, CandleSeries, RangeTooltip, LineSeries,SplineSeries,
HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator,BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator,Tooltip,
Crosshair,AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
} from "@syncfusion/ej2-vue-charts";
Vue.use(StockChartPlugin);
export default {
data() {
return {
seriesData:chartData,
trendlineType:[],
indicatorType:[],
primaryXAxis: {
valueType: "DateTime",
majorGridLines: { color: "transparent" },
},
primaryYAxis: {
majorTickLines: { color: "transparent", width: 0 }
},
crosshair: {
enable: true,
},
tooltip: { enable: true },
legendSettings: { visible: true },
title: 'AAPL Stock Price',
};
},
provide: {
stockChart: [
DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, Tooltip,
Crosshair,BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator,Export, StockLegend
]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
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 Stock Chart’s width vertically, when placed 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
.
<template>
<div class="control-section">
<div>
<ejs-stockchart
id="stockchartcontainer"
:primaryXAxis="primaryXAxis"
:primaryYAxis="primaryYAxis"
:tooltip="tooltip"
:legendSettings="legendSettings"
:indicatorType="indicatorType"
:trendlineType="trendlineType"
:crosshair="crosshair"
:title="title">
<e-stockchart-series-collection>
<e-stockchart-series :dataSource="seriesData" 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>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { chartData } from "./datasource.js";
import {
StockChartPlugin, DateTime, CandleSeries, RangeTooltip, LineSeries,SplineSeries,
HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator,BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator,Tooltip,
Crosshair,AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
} from "@syncfusion/ej2-vue-charts";
Vue.use(StockChartPlugin);
export default {
data() {
return {
seriesData:chartData,
trendlineType:[],
indicatorType:[],
primaryXAxis: {
valueType: "DateTime",
majorGridLines: { color: "transparent" },
},
primaryYAxis: {
majorTickLines: { color: "transparent", width: 0 }
},
crosshair: {
enable: true,
},
tooltip: { enable: true },
legendSettings: {
visible: true,
//Legend size for chart
width: '500', height: '50',
border: { width: 1, color: 'pink'}
},
title: 'AAPL Stock Price',
};
},
provide: {
stockChart: [
DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, Tooltip,
Crosshair,BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator,Export, StockLegend
]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Legend Item Size
The size of the legend items can customized by using the shapeHeight
and shapeWidth
property.
<template>
<div class="control-section">
<div>
<ejs-stockchart
id="stockchartcontainer"
:primaryXAxis="primaryXAxis"
:primaryYAxis="primaryYAxis"
:tooltip="tooltip"
:legendSettings="legendSettings"
:indicatorType="indicatorType"
:trendlineType="trendlineType"
:crosshair="crosshair"
:title="title">
<e-stockchart-series-collection>
<e-stockchart-series :dataSource="seriesData" 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>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { chartData } from "./datasource.js";
import {
StockChartPlugin, DateTime, CandleSeries, RangeTooltip, LineSeries,SplineSeries,
HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator,BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator,Tooltip,
Crosshair,AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
} from "@syncfusion/ej2-vue-charts";
Vue.use(StockChartPlugin);
export default {
data() {
return {
seriesData:chartData,
trendlineType:[],
indicatorType:[],
primaryXAxis: {
valueType: "DateTime",
majorGridLines: { color: "transparent" },
},
primaryYAxis: {
majorTickLines: { color: "transparent", width: 0 }
},
crosshair: {
enable: true,
},
tooltip: { enable: true },
legendSettings: {
visible: true,
//Legend item size for chart
shapeHeight: 15, shapeWidth: 15
},
title: 'AAPL Stock Price',
};
},
provide: {
stockChart: [
DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, Tooltip,
Crosshair,BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator,Export, StockLegend
]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
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.
<template>
<div class="control-section">
<div>
<ejs-stockchart
id="stockchartcontainer"
:primaryXAxis="primaryXAxis"
:primaryYAxis="primaryYAxis"
:tooltip="tooltip"
:legendSettings="legendSettings"
:indicatorType="indicatorType"
:trendlineType="trendlineType"
:crosshair="crosshair"
:title="title">
<e-stockchart-series-collection>
<e-stockchart-series :dataSource="seriesData" type="Candle" volume='volume' xName='date' low='low' high='high' open='open' close='close'></e-stockchart-series>
</e-stockchart-series-collection>
</ejs-stockchart>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { chartData } from "./datasource.js";
import {
StockChartPlugin, DateTime, CandleSeries, RangeTooltip, LineSeries,SplineSeries,
HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator,BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator,Tooltip,
Crosshair,AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
} from "@syncfusion/ej2-vue-charts";
Vue.use(StockChartPlugin);
export default {
data() {
return {
seriesData:chartData,
trendlineType:[],
indicatorType:[],
primaryXAxis: {
valueType: "DateTime",
majorGridLines: { color: "transparent" },
},
primaryYAxis: {
majorTickLines: { color: "transparent", width: 0 }
},
crosshair: {
enable: true,
},
tooltip: { enable: true },
title: 'AAPL Stock Price',
legendSettings: { visible: true }
};
},
provide: {
stockChart: [
DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, Tooltip,
Crosshair,BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator,Export, StockLegend
]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
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
.
<template>
<div class="control-section">
<div>
<ejs-stockchart
id="stockchartcontainer"
:primaryXAxis="primaryXAxis"
:primaryYAxis="primaryYAxis"
:tooltip="tooltip"
:legendSettings="legendSettings"
:indicatorType="indicatorType"
:trendlineType="trendlineType"
:crosshair="crosshair"
:title="title">
<e-stockchart-series-collection>
<e-stockchart-series :dataSource="seriesData" 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>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { chartData } from "./datasource.js";
import {
StockChartPlugin, DateTime, CandleSeries, RangeTooltip, LineSeries,SplineSeries,
HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator,BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator,Tooltip,
Crosshair,AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator, Export, StockLegend
} from "@syncfusion/ej2-vue-charts";
Vue.use(StockChartPlugin);
export default {
data() {
return {
seriesData:chartData,
trendlineType:[],
indicatorType:[],
primaryXAxis: {
valueType: "DateTime",
majorGridLines: { color: "transparent" },
},
primaryYAxis: {
majorTickLines: { color: "transparent", width: 0 }
},
crosshair: {
enable: true,
},
tooltip: { enable: true },
title: 'AAPL Stock Price',
legendSettings: {
visible: true,
title: 'Countries',
titlePosition: 'Top',
titleStyle: {
fontFamily: 'verdana',
fontStyle: 'Normal',
fontWeight: 'Normal',
size: '15px',
textAlignment: 'Center',
color: 'blue',
textOverflow: 'None'
},
maximumTitleWidth: 150
}
};
},
provide: {
stockChart: [
DateTime, RangeTooltip, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, Tooltip,
Crosshair,BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator,Export, StockLegend
]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
Note: To use legend feature, we need to inject
StockLegend
into theProvide
.