Essential JS 2 Chart chart supports 32 types of series.
Line
To render a line series, use series type
as Line
and
inject LineSeries
module using Chart.Inject(LineSeries)
method.
var chartData = [
{ x: 2005, y: 28 }, { x: 2006, y: 25 },{ x: 2007, y: 26 }, { x: 2008, y: 27 },
{ x: 2009, y: 32 }, { x: 2010, y: 35 }, { x: 2011, y: 30 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Year',
minimum: 2004, maximum: 2012, interval: 1
},
primaryYAxis: {
minimum: 20, maximum: 40, interval: 5,
title: 'Efficiency',
labelFormat: '{value}%'
},
series:[{
dataSource: chartData, width:2,
xName: 'x', yName: 'y',
name: 'India',
//Series type as line
type: 'Line'
}],
title: 'Efficiency of oil-fired power production'
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
Step Line
To render a step line series, use series type
as StepLine
and
inject StepLineSeries
module using Chart.Inject(StepLineSeries)
method.
var chartData = [
{ x: 2006, y: 378 }, { x: 2007, y: 416 },
{ x: 2008, y: 404 }, { x: 2009, y: 390 },
{ x: 2010, y: 376 }, { x: 2011, y: 365 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Year',
minimum: 2005, maximum: 2012, interval: 1
},
primaryYAxis: {
minimum: 330, maximum: 450, interval: 30,
title: 'Intensity (g/kWh)'
},
series:[{
dataSource: chartData, width:2,
xName: 'x', yName: 'y',
name: 'USA',
// Series type as StepLine
type: 'StepLine'
}],
title: 'CO2 - Intensity Analysis'
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
Stacked Line
To render a stacked line series, use series type
as
StackingLine
and inject StackingLineSeries
module
using Chart.Inject(StackingLineSeries)
method.
var chartData = [
{ x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },
{ x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },
{ x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },
{ x: 'Clothes', y: 70, y1: 30, y2: 60, y3: 180 },
{ x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },
{ x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },
{ x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },
{ x: 'Electricity', y: 55, y1: 95, y2: 55, y3: 75 },
{ x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },
{ x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },
{ x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },
{ x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }
];
var chart = new ej.charts.Chart({
//Initializing Primary X Axis
primaryXAxis: {
interval: 1
},
//Initializing Primary Y Axis
primaryYAxis:
{
interval: 100,
},
chartArea: { border: { width: 0 } },
//Initializing Chart Series
series: [
{
type: 'StackingLine', dataSource: chartData, marker: { visible: true },
dashArray: '5, 1', xName: 'x', width: 2, yName: 'y', name: 'John'
},
{
type: 'StackingLine', dataSource: chartData, marker: { visible: true },
dashArray: '5, 1', xName: 'x', width: 2, yName: 'y1', name: 'Peter'
},
{
type: 'StackingLine', dataSource: chartData, marker: { visible: true },
dashArray: '5, 1', xName: 'x', width: 2, yName: 'y2', name: 'Steve'
},
{
type: 'StackingLine', dataSource: chartData, marker: { visible: true },
dashArray: '5, 1', xName: 'x', width: 2, yName: 'y3', name: 'Charle'
}
],
//Initializing User Interaction Tooltip
tooltip: {
enable: true
},
chart.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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
100% Stacked Line
To render a 100% stacked line series, use series type
as
StackingLine100
and inject StackingLineSeries
module using Chart.Inject(StackingLineSeries)
method.
var chartData = [
{ x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },
{ x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },
{ x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },
{ x: 'Clothes', y: 70, y1: 30, y2: 60, y3: 180 },
{ x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },
{ x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },
{ x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },
{ x: 'Electricity', y: 55, y1: 95, y2: 55, y3: 75 },
{ x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },
{ x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },
{ x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },
{ x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }
];
var chart = new ej.charts.Chart({
//Initializing Primary X Axis
primaryXAxis: {
interval: 1, valueType: 'Category'
},
primaryYAxis:
{
interval: 20
},
chartArea: { border: { width: 0 } },
series: [
{
type: 'StackingLine100', dataSource: chartData, marker: { visible: true },
dashArray: '5, 1', xName: 'x', width: 2, yName: 'y', name: 'John'
},
{
type: 'StackingLine100', dataSource: chartData, marker: { visible: true },
dashArray: '5, 1', xName: 'x', width: 2, yName: 'y1', name: 'Peter'
},
{
type: 'StackingLine100', dataSource: chartData, marker: { visible: true },
dashArray: '5, 1', xName: 'x', width: 2, yName: 'y2', name: 'Steve'
},
{
type: 'StackingLine100', dataSource: chartData, marker: { visible: true },
dashArray: '5, 1', xName: 'x', width: 2, yName: 'y3', name: 'Charle'
}
],
tooltip: {
enable: true,
format: '${point.x} : <b>${point.y} (${point.percentage}%)</b>'
},
chart.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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
Spline
To render a spline series, use series type
as Spline
and
inject SplineSeries
module using Chart.Inject(SplineSeries)
method.
var chartData = [
{ x: 'Jan', y: -1 }, { x: 'Feb', y: -1 }, { x: 'Mar', y: 2 },
{ x: 'Apr', y: 8 }, { x: 'May', y: 13 }, { x: 'Jun', y: 18 },
{ x: 'Jul', y: 21 }, { x: 'Aug', y: 20 }, { x: 'Sep', y: 16 },
{ x: 'Oct', y: 10 }, { x: 'Nov', y: 4 }, { x: 'Dec', y: 0 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Month',
valueType: 'Category'
},
primaryYAxis: {
minimum: -5, maximum: 35, interval: 5,
title: 'Temperature in Celsius',
labelFormat: '{value}C'
}
series:[{
dataSource: chartData, width:2,
xName: 'x', yName: 'y',
name: 'London',
// Series type as spline series
type: 'Spline'
}],
title: 'Climate Graph-2012'
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
Spline Area
To render a spline area series, use series type
as SplineArea
and
inject SplineAreaSeries
module using Chart.Inject(SplineAreaSeries)
method.
var chartData = [
{ x: 'Jan', y: -1 }, { x: 'Feb', y: -1 }, { x: 'Mar', y: 2 },
{ x: 'Apr', y: 8 }, { x: 'May', y: 13 }, { x: 'Jun', y: 18 },
{ x: 'Jul', y: 21 }, { x: 'Aug', y: 20 }, { x: 'Sep', y: 16 },
{ x: 'Oct', y: 10 }, { x: 'Nov', y: 4 }, { x: 'Dec', y: 0 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Month',
valueType: 'Category'
},
primaryYAxis: {
minimum: -5, maximum: 35, interval: 5,
title: 'Temperature in Celsius',
labelFormat: '{value}C'
}
series:[{
dataSource: chartData, width:2,
xName: 'x', yName: 'y',
name: 'London',
// Series type as spline series
type: 'Spline'
}],
title: 'Climate Graph-2012'
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
Multicolored Line
To render a multicolored line series, use the series type as MultiColoredLine
, and inject the MultiColoredLineSeries
module using Chart.Inject(MultiColoredLineSeries)
method. Here, the individual colors to the data can be mapped by using pointColorMapping
.
var chartData = [
{ x: 2005, y: 28 }, { x: 2006, y: 25 },{ x: 2007, y: 26 }, { x: 2008, y: 27 },
{ x: 2009, y: 32 }, { x: 2010, y: 35 }, { x: 2011, y: 30 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Year',
minimum: 2004, maximum: 2012, interval: 1
},
primaryYAxis: {
minimum: 20, maximum: 40, interval: 5,
title: 'Efficiency',
labelFormat: '{value}%'
},
series:[{
dataSource: chartData, width:2,
xName: 'x', yName: 'y',
name: 'India',
//Series type as line
type: 'Line'
}],
title: 'Efficiency of oil-fired power production'
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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 of Line Chart
stroke
, stroke-width
and dashArray
of all line type series can be customized by using
fill
, width
and
dashArray
properties.
var chartData = [
{ x: 2005, y: 28 }, { x: 2006, y: 25 },{ x: 2007, y: 26 }, { x: 2008, y: 27 },
{ x: 2009, y: 32 }, { x: 2010, y: 35 }, { x: 2011, y: 30 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Year',
minimum: 2004, maximum: 2012, interval: 1
},
primaryYAxis: {
minimum: 20, maximum: 40, interval: 5,
title: 'Efficiency',
labelFormat: '{value}%'
},
series:[{
dataSource: chartData,
//fill for chart series
fill: 'red',
//line width as 4 for chart series
width:4,
//dash array value as 5,5
dashArray: '5,5',
xName: 'x', yName: 'y',
name: 'India', type: 'Line'
}],
title: 'Efficiency of oil-fired power production'
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
Area
To render a area series, use series type
as Area
and inject
AreaSeries
module using Chart.Inject(AreaSeries)
method.
var chartData = [
{ x: 1900, y: 4 }, { x: 1920, y: 3.0 },{ x: 1940, y: 3.8 },
{ x: 1960, y: 3.4 }, { x: 1980, y: 3.2 }, { x: 2000, y: 3.9 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Year',
minimum: 1900, maximum: 2000, interval: 10,
edgeLabelPlacement: 'Shift'
},
primaryYAxis: {
minimum: 2, maximum: 5, interval: 0.5,
title: 'Sales Amount in Millions'
},
series:[{
dataSource: chartData,
xName: 'x', yName: 'y',
opacity: 0.5, fill:'#69D2E7',
name: 'Product A',border: { width: 2 },
// Series type as area series
type: 'Area'
}],
title: 'Average Sales Comparison'
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
Range Area
To render a range area series, use series type
as RangeArea
and inject RangeAreaSeries
module using Chart.Inject(RangeAreaSeries)
method.
Since the RangeArea series requires two y values for a point, you have to add the high and low value. High and Low value specifies the maximum and minimum range of the points.
var series= [];
var value = 70;
var point;
for (var i = 1; i < 70; i++) {
if (Math.random() > .5) {
value += Math.random();
} else {
value -= Math.random();
}
point = { x: new Date(1930 + i, 5, i), high: value, low: value - 14 };
series.push(point);
}
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Month',
valueType: 'DateTime',
edgeLabelPlacement: 'Shift',
},
primaryYAxis:
{
title: 'Temperature(Celsius)',
minimum: 50, maximum: 80, interval: 5,
},
series: [
{
type: 'RangeArea',
name: 'India',
dataSource: series,
xName: 'x', high: 'high', low: 'low', opacity: 0.5,
fill: '#69D2E7', border: { color: 'blueviolet', width: 1 }
}],
title: 'Maximum and Minimum Temperature',
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
Spline Range Area
The Spline Range Area Chart is used to display continuous data points as a set of splines that vary between high and low values over intervals of time and across different categories.
To render a spline range area series, use series type
as SplineRangeArea
and inject SplineRangeAreaSeries
module using Chart.Inject(SplineRangeAreaSeries)
method.
var splinedata = [
{ x: 'Jan', high: 14, low: 4, high1: 29, low1: 19 },
{ x: 'Feb', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Mar', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Apr', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'May', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Jun', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Jul', high: 15, low: 5, high1: 30, low1: 20 },
{ x: 'Aug', high: 17, low: 7, high1: 32, low1: 22 },
{ x: 'Sep', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Oct', high: 22, low: 12, high1: 37, low1: 27 },
{ x: 'Nov', high: 20, low: 10, high1: 35, low1: 25 },
{ x: 'Dec', high: 17, low: 7, high1: 32, low1: 22 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
valueType: 'Category',
edgeLabelPlacement: 'Shift',
majorGridLines: { width: 0 },
},
primaryYAxis: {
labelFormat: '{value}˚C',
lineStyle: { width: 0 },
minimum: 0,
maximum: 40,
majorTickLines: { width: 0 }
},
series: [
{
type: 'SplineRangeArea',
name: 'England',
dataSource: splinedata,
xName: 'x', high: 'high', low: 'low',
opacity: 0.4,
},
{
type: 'SplineRangeArea',
name: 'India',
dataSource: splinedata,
xName: 'x', high: 'high1', low: 'low1',
opacity: 0.4,
}],
title: 'Monthly Temperature Range',
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
Stacked Area
To render a stacked area series, use series type
as StackingArea
and inject StackingAreaSeries
module
using Chart.Inject(StackingAreaSeries)
method.
var chartData = [
{ x: new Date(2000, 0, 1), y: 0.61, y1: 0.03, y2: 0.48, y3: 0.23 },
{ x: new Date(2001, 0, 1), y: 0.81, y1: 0.05, y2: 0.53, y3: 0.17 },
{ x: new Date(2002, 0, 1), y: 0.91, y1: 0.06, y2: 0.57, y3: 0.17 },
{ x: new Date(2003, 0, 1), y: 1, y1: 0.09, y2: 0.61, y3: 0.20 },
{ x: new Date(2004, 0, 1), y: 1.19, y1: 0.14, y2: 0.63, y3: 0.23 },
{ x: new Date(2005, 0, 1), y: 1.47, y1: 0.20, y2: 0.64, y3: 0.36 },
{ x: new Date(2006, 0, 1), y: 1.74, y1: 0.29, y2: 0.66, y3: 0.43 },
{ x: new Date(2007, 0, 1), y: 1.98, y1: 0.46, y2: 0.76, y3: 0.52 },
{ x: new Date(2008, 0, 1), y: 1.99, y1: 0.64, y2: 0.77, y3: 0.72 },
{ x: new Date(2009, 0, 1), y: 1.70, y1: 0.75, y2: 0.55, y3: 1.29 },
{ x: new Date(2010, 0, 1), y: 1.48, y1: 1.06, y2: 0.54, y3: 1.38 },
{ x: new Date(2011, 0, 1), y: 1.38, y1: 1.25, y2: 0.57, y3: 1.82 },
{ x: new Date(2012, 0, 1), y: 1.66, y1: 1.55, y2: 0.61, y3: 2.16 },
{ x: new Date(2013, 0, 1), y: 1.66, y1: 1.55, y2: 0.67, y3: 2.51 },
{ x: new Date(2014, 0, 1), y: 1.67, y1: 1.65, y2: 0.67, y3: 2.61 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Years',
valueType: 'DateTime',
intervalType: 'Years',
majorTickLines: { width: 0 },
labelFormat: 'y',
edgeLabelPlacement: 'Shift'
},
primaryYAxis:
{
title: 'Spend in Billions',
minimum: 0,
maximum: 7,
interval: 1,
majorTickLines: { width: 0 },
labelFormat: '{value}B'
},
series: [
{
dataSource: chartData, xName: 'x', yName: 'y',
//Series type as stacked area series
type: 'StackingArea',
name: 'Organic',
}, {
dataSource: chartData, xName: 'x', yName: 'y1',
type: 'StackingArea', name: 'Fair-trade',
}, {
dataSource: chartData, xName: 'x', yName: 'y2',
type: 'StackingArea', name: 'Veg Alternatives',
}, {
dataSource: chartData, xName: 'x', yName: 'y3',
type: 'StackingArea', name: 'Others',
}
],
title: 'Trend in Sales of Ethical Produce'
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
100% Stacked Area
To render a 100% stacked area series, use series type
as StackingArea100
and inject StackingAreaSeries
module using Chart.Inject(StackingAreaSeries)
method.
var chartData = [
{ x: new Date(2006, 0, 1), y: 34, y1: 51, y2: 14, y3: 37 },
{ x: new Date(2007, 0, 1), y: 20, y1: 26, y2: 34, y3: 15 },
{ x: new Date(2008, 0, 1), y: 40, y1: 37, y2: 73, y3: 53 },
{ x: new Date(2009, 0, 1), y: 51, y1: 51, y2: 51, y3: 51 },
{ x: new Date(2010, 0, 1), y: 26, y1: 26, y2: 26, y3: 26 },
{ x: new Date(2011, 0, 1), y: 37, y1: 37, y2: 37, y3: 37 },
{ x: new Date(2012, 0, 1), y: 54, y1: 43, y2: 12, y3: 54 },
{ x: new Date(2013, 0, 1), y: 44, y1: 23, y2: 16, y3: 44 },
{ x: new Date(2014, 0, 1), y: 48, y1: 55, y2: 34, y3: 23 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Years',
valueType: 'DateTime',
intervalType: 'Years',
labelFormat: 'y',
edgeLabelPlacement: 'Shift'
},
primaryYAxis:
{
title: 'Temperature (%)',
labelFormat: '{value}%',
rangePadding: 'None'
},
series: [
{
dataSource: chartData, xName: 'x', yName: 'y',
//Series type as 100% stacked area series
type: 'StackingArea100',
name: 'USA',
}, {
dataSource: chartData, xName: 'x', yName: 'y1',
type: 'StackingArea100', name: 'UK',
}, {
dataSource: chartData, xName: 'x', yName: 'y2',
type: 'StackingArea100', name: 'Canada',
}, {
dataSource: chartData, xName: 'x', yName: 'y3',
type: 'StackingArea100', name: 'China',
}
],
title: 'Annual Temperature Comparison'
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
Step Area
To render a step area series, use series type
as StepArea
and inject StepAreaSeries
module using Chart.Inject(StepAreaSeries)
method.
var chartData = [
{ x: 1, y: 7 }, { x: 2, y: 1 }, { x: 3, y: 1 },
{ x: 4, y: 14 }, { x: 5, y: 1 }, { x: 6, y: 10 },
{ x: 7, y: 8 }, { x: 8, y: 6 }, { x: 9, y: 10 },
{ x: 10, y: 10 }, { x: 11, y: 16 }, { x: 12, y: 6 },
{ x: 13, y: 14 }, { x: 14, y: 7 }, { x: 15, y: 5 },
{ x: 16, y: 2 }, { x: 17, y: 14 }, { x: 18, y: 7 },
{ x: 19, y: 7 }, { x: 20, y: 10 }];
var chart = new ej.charts.Chart({
primaryXAxis: {
valueType: 'Double',
title: 'Overs'
},
primaryYAxis: {
title: 'Runs'
},
series:[{
dataSource: chartData,
xName: 'x', yName: 'y',
name: 'England', type: 'StepArea'
}],
title: 'England - Run Rate',
tooltip:{
enable:true
}
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
Stacked Step Area
To render a stacked step area series, use series type
as StackingStepArea
and inject StackingStepAreaSeries
module using Chart.Inject(StackingStepAreaSeries)
method.
var chart = new ej.charts.Chart({
series:[
{
dataSource: [{ x: 2000, y: 416 }, { x: 2001, y: 490 }, { x: 2002, y: 470 }, { x: 2003, y: 500 },
{ x: 2004, y: 449 }, { x: 2005, y: 470 }, { x: 2006, y: 437 }, { x: 2007, y: 458 },
{ x: 2008, y: 500 }, { x: 2009, y: 473 }, { x: 2010, y: 520 }, { x: 2011, y: 509 }],
xName: 'x', yName: 'y',
type: 'StackingStepArea'
},
{
dataSource: [{ x: 2000, y: 180 }, { x: 2001, y: 240 }, { x: 2002, y: 370 }, { x: 2003, y: 200 },
{ x: 2004, y: 229 }, { x: 2005, y: 210 }, { x: 2006, y: 337 }, { x: 2007, y: 258 },
{ x: 2008, y: 300 }, { x: 2009, y: 173 }, { x: 2010, y: 220 }, { x: 2011, y: 309 }],
xName: 'x', yName: 'y',
type: 'StackingStepArea'
}
],
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
Multicolored area
To render a multicolored area series, use the series type as MultiColoredArea
, and inject the MultiColoredAreaSeries
module using Chart.Inject(MultiColoredAreaSeries)
method. The required segments
of the series can be customized using the value
, color
, and dashArray
.
var chartData = [
{ x: 1, y: 7 }, { x: 2, y: 1 }, { x: 3, y: 1 },
{ x: 4, y: 14 }, { x: 5, y: 1 }, { x: 6, y: 10 },
{ x: 7, y: 8 }, { x: 8, y: 6 }, { x: 9, y: 10 },
{ x: 10, y: 10 }, { x: 11, y: 16 }, { x: 12, y: 6 },
{ x: 13, y: 14 }, { x: 14, y: 7 }, { x: 15, y: 5 },
{ x: 16, y: 2 }, { x: 17, y: 14 }, { x: 18, y: 7 },
{ x: 19, y: 7 }, { x: 20, y: 10 }];
var chart = new ej.charts.Chart({
primaryXAxis: {
valueType: 'Double',
title: 'Overs'
},
primaryYAxis: {
title: 'Runs'
},
series:[{
dataSource: chartData,
xName: 'x', yName: 'y',
name: 'England', type: 'StepArea'
}],
title: 'England - Run Rate',
tooltip:{
enable:true
}
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
fill
and dashArray
of all area type series can be customized using fill
and dashArray
properties.
var chartData = [
{ x: 1900, y: 4 }, { x: 1920, y: 3.0 },{ x: 1940, y: 3.8 },
{ x: 1960, y: 3.4 }, { x: 1980, y: 3.2 }, { x: 2000, y: 3.9 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Year',
minimum: 1900, maximum: 2000, interval: 10,
edgeLabelPlacement: 'Shift'
},
primaryYAxis: {
minimum: 2, maximum: 5, interval: 0.5,
title: 'Sales Amount in Millions'
},
series:[{
dataSource: chartData,
xName: 'x', yName: 'y',
opacity: 0.5, fill:'#69D2E7',
//stroke-width for chart series
width: 3,
// dashArray for chart series
dashArray: '5,5',
name: 'Product A',
// Series type as area series
type: 'Area'
}],
title: 'Average Sales Comparison'
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
The width
and fill
properties in the border
can be used to customize the border of all area type series.
var chartData = [
{ x: 1900, y: 4 }, { x: 1920, y: 3.0 },{ x: 1940, y: 3.8 },
{ x: 1960, y: 3.4 }, { x: 1980, y: 3.2 }, { x: 2000, y: 3.9 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Year',
minimum: 1900, maximum: 2000, interval: 10,
edgeLabelPlacement: 'Shift'
},
primaryYAxis: {
minimum: 2, maximum: 5, interval: 0.5,
title: 'Sales Amount in Millions'
},
series:[{
dataSource: chartData,
xName: 'x', yName: 'y',
opacity: 0.5, fill:'#69D2E7',
name: 'Product A',border: { width: 2 },
// Series type as area series
type: 'Area'
}],
title: 'Average Sales Comparison'
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
Column
To render a column series, use series type
as Column
and
inject ColumnSeries
module using Chart.Inject(ColumnSeries)
method.
var chartData = [
{ country: "USA", gold: 50 },
{ country: "China", gold: 40 },
{ country: "Japan", gold: 70 },
{ country: "Australia", gold: 60 },
{ country: "France", gold: 50 },
{ country: "Germany", gold: 40 },
{ country: "Italy", gold: 40 },
{ country: "Sweden", gold: 30 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
valueType: 'Category',
title: 'Countries'
},
primaryYAxis: {
minimum: 0, maximum: 80,
interval: 20, title: 'Medals'
},
series:[{
dataSource: chartData,
xName: 'country', yName: 'gold',
name: 'Gold',
// Series type as column series
type: 'Column'
}],
title: 'Olympic Medals'
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
Stacked Column
To render a stacked column series, use series type
as
StackingColumn
and inject StackingColumnSeries
module
using Chart.Inject(StackingColumnSeries)
method.
var chartData = [
{ x: '2014', y: 111.1, y1: 76.9, y2: 66.1, y3: 34.1 },
{ x: '2015', y: 127.3, y1: 99.5, y2: 79.3, y3: 38.2 },
{ x: '2016', y: 143.4, y1: 121.7, y2: 91.3, y3: 44.0 },
{ x: '2017', y: 159.9, y1: 142.5, y2: 102.4, y3: 51.6 },
{ x: '2018', y: 175.4, y1: 166.7, y2: 112.9, y3: 61.9 },
{ x: '2019', y: 189.0, y1: 182.9, y2: 122.4, y3: 71.5 },
{ x: '2020', y: 202.7, y1: 197.3, y2: 120.9, y3: 82.0 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Years',
interval: 1,
valueType: 'Category'
},
primaryYAxis:
{
title: 'Sales in Billions',
minimum: 0,
maximum: 700,
interval: 100,
labelFormat: '{value}B',
},
series: [
{
dataSource: chartData, xName: 'x', yName: 'y',
//Series type as stacked column
type: 'StackingColumn',
name: 'UK',
}, {
dataSource: chartData, xName: 'x', yName: 'y1',
type: 'StackingColumn', name: 'Germany',
}, {
dataSource: chartData, xName: 'x', yName: 'y2',
type: 'StackingColumn', name: 'France',
}, {
dataSource: chartData, xName: 'x', yName: 'y3',
type: 'StackingColumn', name: 'Italy',
}
],
title: 'Mobile Game Market by Country'
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
Grouped Column
You can use the groupName
property to group the data points in the column type charts. Data points with same group name are grouped together.
var chart = new ej.charts.Chart({
primaryXAxis: {
valueType: 'Category',
},
series: [
{
type: 'Column', xName: 'x', width: 2, yName: 'y', groupName: 'USA', columnWidth: 0.7,
dataSource: [{ x: '2012', y: 104 }, { x: '2016', y: 121 }, { x: '2020', y: 113 }], columnSpacing: 0.1,
},
{
type: 'Column', xName: 'x', width: 2, yName: 'y', groupName: 'USA', columnWidth: 0.5,
dataSource: [{ x: '2012', y: 46 }, { x: '2016', y: 46 }, { x: '2020', y: 39 }], columnSpacing: 0.1,
},
{
type: 'Column', xName: 'x', width: 2, yName: 'y', groupName: 'UK', columnWidth: 0.7,
dataSource: [{ x: '2012', y: 65 }, { x: '2016', y: 67 },{ x: '2020', y: 65 }], columnSpacing: 0.1,
},
{
type: 'Column', xName: 'x', width: 2, yName: 'y', groupName: 'UK', columnWidth: 0.5,
dataSource: [{ x: '2012', y: 29 }, { x: '2016', y: 27 },{ x: '2020', y: 22 }], columnSpacing: 0.1,
},
],
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
100% Stacked Column
To render a 100% stacked column series, use series type
as
StackingColumn100
and inject StackingColumnSeries
module using Chart.Inject(StackingColumnSeries)
method.
var chartData = [
{ x: new Date(2006, 0, 1), y: 900, y1: 190, y2: 250, y3: 150 },
{ x: new Date(2007, 0, 1), y: 544, y1: 226, y2: 145, y3: 120 },
{ x: new Date(2008, 0, 1), y: 880, y1: 194, y2: 190, y3: 115 },
{ x: new Date(2009, 0, 1), y: 675, y1: 250, y2: 220, y3: 125 },
{ x: new Date(2010, 0, 1), y: 765, y1: 222, y2: 225, y3: 132 },
{ x: new Date(2011, 0, 1), y: 679, y1: 181, y2: 135, y3: 137 },
{ x: new Date(2012, 0, 1), y: 770, y1: 128, y2: 152, y3: 110 },
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Years',
interval: 1,
valueType: 'DateTime',
labelFormat: 'y'
},
primaryYAxis:
{
title: 'GDP (%) Per Annum',
rangePadding: 'None',
labelFormat: '{value}%',
},
series: [
{
dataSource: chartData, xName: 'x', yName: 'y',
//Series type as 100% stacked column series
type: 'StackingColumn100',
name: 'UK',
}, {
dataSource: chartData, xName: 'x', yName: 'y1',
type: 'StackingColumn100', name: 'Germany',
}, {
dataSource: chartData, xName: 'x', yName: 'y2',
type: 'StackingColumn100', name: 'France',
}, {
dataSource: chartData, xName: 'x', yName: 'y3',
type: 'StackingColumn100', name: 'Italy',
}
],
title: 'Gross Domestic Product Growth'
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
Range Column
To render a range column series, use series type
as RangeColumn
and inject RangeColumnSeries
module
using Chart.Inject(RangeColumnSeries)
method.
var data = [
{ x: 'Jan', low: 0.7, high: 6.1 }, { x: 'Feb', low: 1.3, high: 6.3 }, { x: 'Mar', low: 1.9, high: 8.5 },
{ x: 'Apr', low: 3.1, high: 10.8 }, { x: 'May', low: 5.7, high: 14.40 }, { x: 'Jun', low: 8.4, high: 16.90 },
{ x: 'Jul', low: 10.6,high: 19.20 }, { x: 'Aug', low: 10.5,high: 18.9 }, { x: 'Sep', low: 8.5, high: 16.1 },
{ x: 'Oct', low: 6.0, high: 12.5 }, { x: 'Nov', low: 1.5, high: 6.9 }, { x: 'Dec', low: 5.1, high: 12.1 }
];
var data2 = [
{ x: 'Jan', low: 1.7, high: 7.1 }, { x: 'Feb', low: 1.9, high: 7.7 }, { x: 'Mar', low: 1.2, high: 7.5 },
{ x: 'Apr', low: 2.5, high: 9.8 }, { x: 'May', low: 4.7, high: 11.4 }, { x: 'Jun', low: 6.4, high: 14.4 },
{ x: 'Jul', low: 9.6, high: 17.2 }, { x: 'Aug', low: 10.7, high: 17.9 }, { x: 'Sep', low: 7.5, high: 15.1 },
{ x: 'Oct', low: 3.0, high: 10.5 }, { x: 'Nov', low: 1.2, high: 7.9 }, { x: 'Dec', low: 4.1, high: 9.1 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Month',
valueType: 'Category'
},
primaryYAxis:
{
title: 'Temperature(Celsius)',
},
series: [
{
// Series type as range column series
type: 'RangeColumn',
name: 'India',
dataSource: data, xName: 'x', high: 'high', low: 'low',
}, {
type: 'RangeColumn', name: 'India',
dataSource: data2, xName: 'x', high: 'high', low: 'low',
}
],
title: 'Maximum and Minimum Temperature'
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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 of Column
fill
, border
and dashArray
of all column type series can be
customized using fill
, border
and dashArray
properties.
Width of the column and space between each column can be customized using columnWidth
and columnSpacing
properties respectively. The columnWidthInPixel
property allows to specify the column width in pixel unit.
var chartData = [
{ country: "USA", gold: 50 },
{ country: "China", gold: 40 },
{ country: "Japan", gold: 70 },
{ country: "Australia", gold: 60 },
{ country: "France", gold: 50 },
{ country: "Germany", gold: 40 },
{ country: "Italy", gold: 40 },
{ country: "Sweden", gold: 30 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
valueType: 'Category',
title: 'Countries'
},
primaryYAxis: {
minimum: 0, maximum: 80,
interval: 20, title: 'Medals'
},
series:[{
dataSource: chartData,
xName: 'country', yName: 'gold',
//fill for column series
fill: 'green',
//border width and color for column series
border: {
width: '2',
color: 'red'
},
columnSpacing: 0.5,
columnWidth: 0.5,
name: 'Gold',
//series type as column series
type: 'Column'
}],
title: 'Olympic Medals'
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
Stacking Group
You can use the stackingGroup
property to group the stacked columns and 100% stacked columns.
Columns with same group name are stacked on top of each other.
var chartData = [
{ x: '2014', y: 111.1, y1: 76.9, y2: 66.1, y3: 34.1 },
{ x: '2015', y: 127.3, y1: 99.5, y2: 79.3, y3: 38.2 },
{ x: '2016', y: 143.4, y1: 121.7, y2: 91.3, y3: 44.0 },
{ x: '2017', y: 159.9, y1: 142.5, y2: 102.4, y3: 51.6 },
{ x: '2018', y: 175.4, y1: 166.7, y2: 112.9, y3: 61.9 },
{ x: '2019', y: 189.0, y1: 182.9, y2: 122.4, y3: 71.5 },
{ x: '2020', y: 202.7, y1: 197.3, y2: 120.9, y3: 82.0 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Years',
interval: 1,
valueType: 'Category'
},
primaryYAxis:
{
title: 'Sales in Billions',
minimum: 0,
maximum: 400,
interval: 100,
labelFormat: '{value}B',
},
series: [
{
dataSource: chartData, xName: 'x', yName: 'y',
type: 'StackingColumn', name: 'UK',
//Stacking group for stacked column series
stackingGroup: 'UKAndGermany'
}, {
dataSource: chartData, xName: 'x', yName: 'y1',
type: 'StackingColumn', name: 'Germany', stackingGroup: 'UKAndGermany'
}, {
dataSource: chartData, xName: 'x', yName: 'y2',
type: 'StackingColumn', name: 'France', stackingGroup: 'FranceAndItaly'
}, {
dataSource: chartData, xName: 'x', yName: 'y3',
type: 'StackingColumn', name: 'Italy', stackingGroup: 'FranceAndItaly'
}
],
title: 'Mobile Game Market by Country'
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
Bar
To render a bar series, use series type
as Bar
and inject
BarSeries
module using Chart.Inject(BarSeries)
method.
var chartData = [
{ x: 2006, y: 7.8 }, { x: 2007, y: 7.2},
{ x: 2008, y: 6.8 }, { x: 2009, y: 10.7 },
{ x: 2010, y: 10.8}, { x: 2011, y: 9.8 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
minimum: 2005, maximum: 2012, interval: 1,
title: 'Year'
},
primaryYAxis: {
minimum: 3, maximum: 12,
interval: 1, title: 'Percentage',
labelFormat: '{value}%'
},
series:[{
dataSource: chartData,
xName: 'x', yName: 'y',
name: 'India',
// Series type as bar series
type: 'Bar'
}],
title: 'Unemployment rate (%)'
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
Stacked bar
To render a stacked bar series, use series type
as StackingBar
and inject StackingBarSeries
module
using Chart.Inject(StackingBarSeries)
method.
var chartData = [
{ x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 },
{ x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: -2.5 },
{ x: 'May', y: 20, y1: 21, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 },
{ x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 },
{ x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: 35, y1: 34, y2: -5.5 },
{ x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
valueType: 'Category',
title: 'Months'
},
primaryYAxis:
{
title: 'Percentage (%)',
minimum: -20,
maximum: 100,
labelFormat: '{value}%',
edgeLabelPlacement: 'Shift'
},
series: [
{
//Series type as stacked bar
type: 'StackingBar', name: 'Apple',
dataSource: chartData, xName: 'x', yName: 'y'
}, {
type: 'StackingBar', name: 'Orange',
dataSource: chartData, xName: 'x', yName: 'y1'
}, {
type: 'StackingBar', name: 'Wastage',
dataSource: chartData, xName: 'x', yName: 'y2'
}
],
title: 'Sales Comparison'
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
Grouped Bar
You can use the groupName
property to group the data points in the bar type charts. Data points with same group name are grouped together.
var chart = new ej.charts.Chart({
primaryXAxis: {
valueType: 'Category',
},
series: [
{
type: 'Bar', xName: 'x', width: 2, yName: 'y', groupName: 'USA', columnWidth: 0.7,
dataSource: [{ x: '2012', y: 104 }, { x: '2016', y: 121 }, { x: '2020', y: 113 }], columnSpacing: 0.1,
},
{
type: 'Bar', xName: 'x', width: 2, yName: 'y', groupName: 'USA', columnWidth: 0.5,
dataSource: [{ x: '2012', y: 46 }, { x: '2016', y: 46 }, { x: '2020', y: 39 }], columnSpacing: 0.1,
},
{
type: 'Bar', xName: 'x', width: 2, yName: 'y', groupName: 'UK', columnWidth: 0.7,
dataSource: [{ x: '2012', y: 65 }, { x: '2016', y: 67 },{ x: '2020', y: 65 }], columnSpacing: 0.1,
},
{
type: 'Bar', xName: 'x', width: 2, yName: 'y', groupName: 'UK', columnWidth: 0.5,
dataSource: [{ x: '2012', y: 29 }, { x: '2016', y: 27 },{ x: '2020', y: 22 }], columnSpacing: 0.1,
},
],
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
100% Stacked Bar
To render a 100% stacked bar series, use series type
as
StackingBar100
and inject StackingBarSeries
module using Chart.Inject(StackingBarSeries)
method.
var chartData = [
{ x: 'Jan', y: 6, y1: 6, y2: -1 }, { x: 'Feb', y: 8 , y1: 8, y2: -1.5 },
{ x: 'Mar', y: 12, y1: 11, y2: -2 }, { x: 'Apr', y: 15, y1: 16, y2: -2.5 },
{ x: 'May', y: 20, y1: 21, y2: -3 }, { x: 'Jun', y: 24, y1: 25, y2: -3.5 },
{ x: 'Jul', y: 28, y1: 27, y2: -4 }, { x: 'Aug', y: 32, y1: 31, y2: -4.5 },
{ x: 'Sep', y: 33, y1: 34, y2: -5 }, { x: 'Oct', y: 35, y1: 34, y2: -5.5 },
{ x: 'Nov', y: 40, y1: 41, y2: -6 }, { x: 'Dec', y: 42, y1: 42, y2: -6.5 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
valueType: 'Category',
title: 'Months'
},
primaryYAxis:
{
title: 'Percentage (%)',
minimum: -20,
maximum: 100,
labelFormat: '{value}%',
edgeLabelPlacement: 'Shift'
},
series: [
{
//Series type as 100% stacked bar
type: 'StackingBar100',
name: 'Apple',
dataSource: chartData, xName: 'x', yName: 'y'
}, {
type: 'StackingBar100', name: 'Orange',
dataSource: chartData, xName: 'x', yName: 'y1'
}, {
type: 'StackingBar100', name: 'Wastage',
dataSource: chartData, xName: 'x', yName: 'y2'
}
],
title: 'Sales Comparison'
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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 of Bar Series
fill
, border
and dashArray
of all bar type series can be
customized using fill
, border
and dashArray
properties.
Width of the bar and space between each bar can be customized using columnWidth
and columnSpacing
properties respectively. The columnWidthInPixel
property allows to specify the bar width in pixel unit.
var chartData = [
{ x: 2006, y: 7.8 }, { x: 2007, y: 7.2},
{ x: 2008, y: 6.8 }, { x: 2009, y: 10.7 },
{ x: 2010, y: 10.8}, { x: 2011, y: 9.8 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
minimum: 2005, maximum: 2012, interval: 1,
title: 'Year'
},
primaryYAxis: {
minimum: 3, maximum: 12,
interval: 1, title: 'Percentage',
labelFormat: '{value}%'
},
series:[{
dataSource: chartData,
xName: 'x', yName: 'y',
//fill for bar series
fill: 'green',
//border for bar series
border: {
width: 2,
color: 'red'
},
columnWidth: 0.5,
columnSpacing: 0.5,
name: 'India',
// series type as bar series
type: 'Bar'
}],
title: 'Unemployment rate (%)'
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
Stacking Group
You can use the stackingGroup
property to group the stacked bar and 100% stacked bar.
Columns with same group name are stacked on top of each other.
var chartData = [
{ x: 2007, y: 453, y1: 876, y2: 356, y3: 122 }, { x: 2008, y: 354, y1: 564, y2: 876, y3: 444 },
{ x: 2009, y: 282, y1: 242, y2: 898, y3: 222 }, { x: 2010, y: 321, y1: 121, y2: 567, y3: 231 },
{ x: 2011, y: 333, y1: 343, y2: 456, y3: 122 }, { x: 2012, y: 351, y1: 451, y2: 345, y3: 333 },
{ x: 2013, y: 403, y1: 203, y2: 543, y3: 354 }, { x: 2014, y: 421, y1: 431, y2: 654, y3: 100 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Year',
minimum:2006,
maximum:2015,
interval:1
},
primaryYAxis:
{
title: 'Sales Percentage(%)'
},
series: [
{
type: 'StackingBar', name: 'John',
//Stacking group for stacked bar
stackingGroup: 'JohnAndAndrew',
dataSource: chartData, xName: 'x', yName: 'y'
}, {
type: 'StackingBar', name: 'Andrew', stackingGroup: 'JohnAndAndrew',
dataSource: chartData, xName: 'x', yName: 'y1'
}, {
type: 'StackingBar', name: 'Thomas', stackingGroup: 'ThomasAndMichael',
dataSource: chartData, xName: 'x', yName: 'y2'
}, {
type: 'StackingBar', name: 'Michael', stackingGroup: 'ThomasAndMichael',
dataSource: chartData, xName: 'x', yName: 'y3'
}
],
title: 'Sales by year'
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
To render a scatter series, use series type
as Scatter
and
inject ScatterSeries
module using Chart.Inject(ScatterSeries)
method.
var series1 = [];
var series2 = [];
var point1;
var value = 80;
var value1 = 70;
var i: number;
for (i = 1; i < 120; i++) {
if (Math.random() > 0.5) {
value += Math.random();
} else {
value -= Math.random();
}
value = value < 60 ? 60 : value > 90 ? 90 : value;
point1 = { x: 120 + (i / 2), y: value.toFixed(1) };
series1.push(point1);
}
for (i = 1; i < 120; i++) {
if (Math.random() > 0.5) {
value1 += Math.random();
} else {
value1 -= Math.random();
}
value1 = value1 < 60 ? 60 : value1 > 90 ? 90 : value1;
point1 = { x: 120 + (i / 2), y: value1.toFixed(1) };
series2.push(point1);
}
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Height (cm)',
minimum: 120, maximum: 180,
edgeLabelPlacement: 'Shift',
labelFormat: '{value}cm'
},
primaryYAxis:
{
title: 'Weight (kg)',
minimum: 60, maximum: 90,
labelFormat: '{value}kg',
rangePadding: 'None'
},
series: [
{
//Series type as scatter
type: 'Scatter',
dataSource: series1, xName: 'x', yName: 'y',
name: 'Male', opacity : 0.7,
marker: { width: 10, height: 10 }
}, {
type: 'Scatter',
dataSource: series2, xName: 'x', yName: 'y',
name: 'Female', opacity : 0.7,
marker: { width: 10, height: 10 }
}
],
title: 'Height Vs Weight'
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
To render a bubble series, use series type
as Bubble
and
inject BubbleSeries
module using Chart.Inject(BubbleSeries)
method.
var chart = new ej.charts.Chart({
//Initializing Primary X Axis
primaryXAxis: {
title: 'Literacy Rate',
minimum: 60,
maximum: 100,
interval: 5
},
//Initializing Primary Y Axis
primaryYAxis: {
title: 'GDP growth rate',
minimum: -2,
maximum: 16,
interval: 2
},
//Initializing Chart Series
series: [
{
type: 'Bubble',
dataSource: [{ x: 92.2, y: 7.8, size: 1.347, text: 'China' },
{ x: 74, y: 6.5, size: 1.241, text: 'India' },
{ x: 90.4, y: 6.0, size: 0.238, text: 'Indonesia' },
{ x: 99.4, y: 2.2, size: 0.312, text: 'US' },
{ x: 88.6, y: 1.3, size: 0.197, text: 'Brazil' },
{ x: 99, y: 0.7, size: 0.0818, text: 'Germany' },
{ x: 72, y: 2.0, size: 0.0826, text: 'Egypt' },
{ x: 99.6, y: 3.4, size: 0.143, text: 'Russia' },
{ x: 99, y: 0.2, size: 0.128, text: 'Japan' },
{ x: 86.1, y: 4.0, size: 0.115, text: 'Mexico' },
{ x: 92.6, y: 6.6, size: 0.096, text: 'Philippines' },
{ x: 61.3, y: 14.5, size: 0.162, text: 'Nigeria' }],
xName: 'x', yName: 'y', size: 'size', name: 'pound',
},
],
title: 'GDP vs Literacy Rate',
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>
Bubble Size Mapping
size
property can be used to map the size value specified in data source.
var chart = new ej.charts.Chart({
//Initializing Primary X Axis
primaryXAxis: {
title: 'Literacy Rate',
minimum: 60,
maximum: 100,
interval: 5
},
//Initializing Primary Y Axis
primaryYAxis: {
title: 'GDP growth rate',
minimum: -2,
maximum: 16,
interval: 2
},
//Initializing Chart Series
series: [
{
type: 'Bubble',
dataSource: [{ x: 92.2, y: 7.8, size: 1.347, text: 'China' },
{ x: 74, y: 6.5, size: 1.241, text: 'India' },
{ x: 90.4, y: 6.0, size: 0.238, text: 'Indonesia' },
{ x: 99.4, y: 2.2, size: 0.312, text: 'US' },
{ x: 88.6, y: 1.3, size: 0.197, text: 'Brazil' },
{ x: 99, y: 0.7, size: 0.0818, text: 'Germany' },
{ x: 72, y: 2.0, size: 0.0826, text: 'Egypt' },
{ x: 99.6, y: 3.4, size: 0.143, text: 'Russia' },
{ x: 99, y: 0.2, size: 0.128, text: 'Japan' },
{ x: 86.1, y: 4.0, size: 0.115, text: 'Mexico' },
{ x: 92.6, y: 6.6, size: 0.096, text: 'Philippines' },
{ x: 61.3, y: 14.5, size: 0.162, text: 'Nigeria' }],
xName: 'x', yName: 'y', size: 'size', name: 'pound',
},
],
title: 'GDP vs Literacy Rate',
}, '#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">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.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>