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/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/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/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/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/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/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/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/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',
// 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/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/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/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/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/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/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/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 Area Series
fill
, border
and dashArray
of all area type series can be customized
using fill
,
border
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/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/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/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/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/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.
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'
},
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/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/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/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/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/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.
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'
},
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/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/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/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/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/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>