- Position and Alignment
- Customization
- Collapsing Legend Item
- Legend Title
Contact Support
Legend in EJ2 JavaScript Stock chart control
8 May 202324 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.
var stockChart = new ej.charts.StockChart({
primaryXAxis: {
valueType: 'DateTime'
},
indicatorType : [],
trendlineType : [],
series: [
{
type: 'Candle',
dataSource: chartData,
name: 'China'
}],
title: 'Unemployment Rates 1975-2010',
tooltip: {enable: true},
legendSettings: {
visible: true,
position:'Top'
}
});
stockChart.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="./index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/28.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Custom
position is used to position the legend anywhere in the Stock Chart using x, y coordinates.
var stockChart = new ej.charts.StockChart({
primaryXAxis: {
valueType: 'DateTime'
},
indicatorType : [],
trendlineType : [],
series: [
{
type: 'Candle',
dataSource: chartData,
name: 'China'
}],
title: 'Unemployment Rates 1975-2010',
tooltip: {enable: true},
legendSettings: {
visible: true,
position:'Custom',
location: { x: 200, y: 20 } }
});
stockChart.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="./index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/28.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Legend Alignment
The legend can be align as Center
, Far
or Near
to the Stock Chart using alignment
property.
var stockChart = new ej.charts.StockChart({
primaryXAxis: {
valueType: 'DateTime'
},
indicatorType : [],
trendlineType : [],
series: [
{
type: 'Candle',
dataSource: chartData,
name: 'China'
}],
title: 'Unemployment Rates 1975-2010',
tooltip: {enable: true},
legendSettings: {
visible: true,
position:'Bottom',
alignment: 'Near'
}
});
stockChart.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="./index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/28.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Customization
To change the legend icon shape, legendShape
property in the series
can be used. By default legend icon shape is seriesType
.
var stockChart = new ej.charts.StockChart({
primaryXAxis: {
valueType: 'DateTime'
},
indicatorType : [],
trendlineType : [],
series: [
{
type: 'Candle',
dataSource: chartData,
name: 'China',
legendShape: 'Pentagon'
}],
title: 'Unemployment Rates 1975-2010',
tooltip: {enable: true},
legendSettings: { visible: true }
});
stockChart.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="./index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/28.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
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
.
var stockChart = new ej.charts.StockChart({
primaryXAxis: {
valueType: 'DateTime'
},
indicatorType : [],
trendlineType : [],
series: [
{
type: 'Candle',
dataSource: chartData,
name: 'China'
}],
title: 'Unemployment Rates 1975-2010',
tooltip: {enable: true},
legendSettings: {
visible: true,
width: '500', height: '50',
border: { width: 1, color: 'pink'}
}
});
stockChart.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="./index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/28.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Legend Item Size
The size of the legend items can customized by using the shapeHeight
and shapeWidth
property.
var stockChart = new ej.charts.StockChart({
primaryXAxis: {
valueType: 'DateTime'
},
indicatorType : [],
trendlineType : [],
series: [
{
type: 'Candle',
dataSource: chartData,
name: 'China'
}],
title: 'Unemployment Rates 1975-2010',
tooltip: {enable: true},
legendSettings: {
visible: true,
shapeHeight: 15, shapeWidth: 15
}
});
stockChart.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="./index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/28.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
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.
var stockChart = new ej.charts.StockChart({
primaryXAxis: {
valueType: 'DateTime'
},
indicatorType : [],
trendlineType : [],
series: [
{
type: 'Candle',
dataSource: chartData,
}],
title: 'Unemployment Rates 1975-2010',
tooltip: {enable: true},
legendSettings: { visible: true }
});
stockChart.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="./index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/28.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
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
.
var stockChart = new ej.charts.StockChart({
primaryXAxis: {
valueType: 'DateTime'
},
indicatorType : [],
trendlineType : [],
series: [
{
type: 'Candle',
dataSource: chartData,
name: 'China'
}],
title: 'Unemployment Rates 1975-2010',
tooltip: {enable: true},
legendSettings: {
visible: true,
title: 'Countries',
titlePosition: 'Top',
titleStyle: {
fontFamily: 'verdana',
fontStyle: 'Normal',
fontWeight: 'Normal',
size: '15px',
textAlignment: 'Center',
color: 'blue',
textOverflow: 'None'
},
maximumTitleWidth: 150
}
});
stockChart.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="./index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/28.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Note: To use legend feature, we need to inject
StockLegend
usingStockChart.Inject(StockLegend)
.