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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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/20.3.56/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>