JavaScript (ES5)
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

Basic Chart in JavaScript (ES5) Chart control

Essential JS 2 Chart chart supports 32 types of series.

Line Chart

Line

To render a line series, use series type as Line and inject LineSeries module using Chart.Inject(LineSeries) method.

Source
Preview
index.js
index.html
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.

Source
Preview
index.js
index.html
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.

Source
Preview
index.js
index.html
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.

Source
Preview
index.js
index.html
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.

Source
Preview
index.js
index.html
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.

Source
Preview
index.js
index.html
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.

Source
Preview
index.js
index.html
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.

Source
Preview
index.js
index.html
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 Charts

Area

To render a area series, use series type as Area and inject AreaSeries module using Chart.Inject(AreaSeries) method.

Source
Preview
index.js
index.html
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.

Source
Preview
index.js
index.html
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.

Source
Preview
index.js
index.html
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.

Source
Preview
index.js
index.html
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.

Source
Preview
index.js
index.html
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>

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.

Source
Preview
index.js
index.html
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.

Source
Preview
index.js
index.html
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 Chart

Column

To render a column series, use series type as Column and inject ColumnSeries module using Chart.Inject(ColumnSeries) method.

Source
Preview
index.js
index.html
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.

Source
Preview
index.js
index.html
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.

Source
Preview
index.js
index.html
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.

Source
Preview
index.js
index.html
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.

Source
Preview
index.js
index.html
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.

Source
Preview
index.js
index.html
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 Chart

Bar

To render a bar series, use series type as Bar and inject BarSeries module using Chart.Inject(BarSeries) method.

Source
Preview
index.js
index.html
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.

Source
Preview
index.js
index.html
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.

Source
Preview
index.js
index.html
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.

Source
Preview
index.js
index.html
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.

Source
Preview
index.js
index.html
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>

Scatter Charts

To render a scatter series, use series type as Scatter and inject ScatterSeries module using Chart.Inject(ScatterSeries) method.

Source
Preview
index.js
index.html
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>

Bubble Chart

To render a bubble series, use series type as Bubble and inject BubbleSeries module using Chart.Inject(BubbleSeries) method.

Source
Preview
index.js
index.html
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.

Source
Preview
index.js
index.html
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>

See Also

Previous
Next