Bar Charts in JavaScript (ES5) Chart control

08 May 2023 / 3 minutes to read

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/21.2.3/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 space and width

The columnSpacing and columnWidth properties are used to customize the space between bars.

Source

Preview

index.js

index.html

var chartData = [
    { x: 2005, y: 8, y1: 4 },
    { x: 2006, y: 5, y1: 8 },
    { x: 2007, y: 6, y1: 3.5 },
    { x: 2008, y: 7, y1: 6 },
    { x: 2009, y: 3.5, y1: 4 },
    { x: 2010, y: 5, y1: 3.5 },
    { x: 2011, y: 3.5, y1: 5 }
];

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'
    },
    {
        dataSource: chartData,
        xName: 'x', yName: 'y1',
        name: 'India',
        columnSpacing: 0.5,
        columnWidth: 0.75,
        // Series type as bar series
        type: 'Bar'
    }],
    title: 'Unemployment rate (%)'
}, '#element');

<!DOCTYPE html><html lang="en"><head>
            
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Grouped bar

You can use the groupName property to group the data points in the bar type charts. Data points with same group name are grouped together.

Source

Preview

index.js

index.html

var chart = new ej.charts.Chart({
     primaryXAxis: {
            valueType: 'Category',
        },
        series: [
            {
                type: 'Bar', xName: 'x', width: 2, yName: 'y', groupName: 'USA', columnWidth: 0.7,
                dataSource: [{ x: '2012', y: 104 }, { x: '2016', y: 121 }, { x: '2020', y: 113 }], columnSpacing: 0.1,
                
            },
            {
                type: 'Bar', xName: 'x', width: 2, yName: 'y', groupName: 'USA', columnWidth: 0.5,
                dataSource: [{ x: '2012', y: 46 }, { x: '2016', y: 46 }, { x: '2020', y: 39 }], columnSpacing: 0.1,
               
            },
            {
                type: 'Bar', xName: 'x', width: 2, yName: 'y', groupName: 'UK', columnWidth: 0.7, 
                dataSource: [{ x: '2012', y: 65 }, { x: '2016', y: 67 },{ x: '2020', y: 65 }], columnSpacing: 0.1,
               
            },
            {
                type: 'Bar', xName: 'x', width: 2, yName: 'y', groupName: 'UK', columnWidth: 0.5,
                dataSource: [{ x: '2012', y: 29 }, { x: '2016', y: 27 },{ x: '2020', y: 22 }], columnSpacing: 0.1,
                
            },
        ],
}, '#element');

<!DOCTYPE html><html lang="en"><head>
            
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/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>

Series customization

The following properties can be used to customize the bar series.

fill – Specifies the color of the series.
opacity – Specifies the opacity of fill.
dashArray – Specifies the dashes of series.
border – Specifies the color and width of series border.

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'
        }, dashArray: '2.5',
        name: 'India',
        // series type as bar series
        type: 'Bar',
        opacity: 1.5
    }],
    title: 'Unemployment rate (%)'
}, '#element');

<!DOCTYPE html><html lang="en"><head>
            
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/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 Charts in JavaScript (ES5) Chart control

Bar

Bar space and width

Grouped bar

Series customization

See Also