Bar Charts in JavaScript Chart control

06 Jun 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.ts

index.html

import { Chart, BarSeries, Category } from '@syncfusion/ej2-charts';
import { numData } from './datasource.ts';
Chart.Inject(BarSeries, Category);

let chart: Chart = new Chart({
   series:[{
        dataSource: numData,
        xName: 'x', yName: 'y',
        // Series type as bar series
        type: 'Bar'
    }],

}, '#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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Bar space and width

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

Source

Preview

index.ts

index.html

import { Chart, BarSeries, Category } from '@syncfusion/ej2-charts';
import { numData } from './datasource.ts';
Chart.Inject(BarSeries, Category);

let chart: Chart = new Chart({
   series:[{
        dataSource: numData,
        xName: 'x', yName: 'y',
        // Series type as bar series
        type: 'Bar'
    },
    {
        dataSource: numData,
        xName: 'x',
        yName: 'y1',
        columnSpacing: 0.5,
        columnWidth: 0.75,
        // Series type as bar series
        type: 'Bar',
      }],

}, '#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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</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.ts

index.html

import { Chart, BarSeries, Category } from '@syncfusion/ej2-charts';
Chart.Inject(BarSeries, Category);

let chart: Chart = new 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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</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.ts

index.html

import { Chart, BarSeries, Category } from '@syncfusion/ej2-charts';

Chart.Inject(BarSeries, Category);

export let numData: object[] = [
  { 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 }];

let chart: Chart = new Chart(
  {
series: [
  {
    dataSource: numData,
    xName: 'x',
    yName: 'y',
    opacity: 0.5,
    border: { width: 4, color: 'red' },
    dashArray: '2',
    fill: 'blue',
    // Series type as bar series
    type: 'Bar',
  },
],
  },
  '#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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Bar Charts in JavaScript Chart control

Bar

Bar space and width

Grouped bar

Series customization

See Also