Bar Charts in React Chart component

10 Oct 202324 minutes to read

Bar

To render a bar series, use series type as Bar and inject BarSeries module into the services.

index.jsx
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, BarSeries } from '@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
function App() {
    const primaryxAxis = { minimum: 2005, maximum: 2012, interval: 1, title: 'Year' };
    const primaryyAxis = {
        title: 'Percentage',
        labelFormat: '{value}%'
    };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Unemployment rate (%)'>
      <Inject services={[BarSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='India' type='Bar'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, BarSeries,  Selection}
from'@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';

function App() {

  const primaryxAxis: AxisModel = { minimum: 2005, maximum: 2012, interval: 1, title: 'Year' };
  const primaryyAxis: AxisModel = {
    title: 'Percentage',
    labelFormat: '{value}%'
  };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Unemployment rate (%)'>
      <Inject services={[BarSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='India' type='Bar'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

Bar space and width

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

index.jsx
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, BarSeries } from '@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
function App() {
    const primaryxAxis = { minimum: 2005, maximum: 2012, interval: 1, title: 'Year' };
    const primaryyAxis = {
        minimum: 3, maximum: 12, interval: 1, title: 'Percentage',
        labelFormat: '{value}%'
    };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Unemployment rate (%)'>
      <Inject services={[BarSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='India' type='Bar'>
        </SeriesDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y1' name='India' type='Bar' columnSpacing={0.5} columnWidth={0.75}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, BarSeries,  Selection}
from'@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';

function App() {

  const primaryxAxis: AxisModel = { minimum: 2005, maximum: 2012, interval: 1, title: 'Year' };
  const primaryyAxis: AxisModel = {
    minimum: 3, maximum: 12, interval: 1, title: 'Percentage',
    labelFormat: '{value}%'
  };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Unemployment rate (%)'>
      <Inject services={[BarSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' name='India' type='Bar'>
        </SeriesDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y1' name='India' type='Bar' columnSpacing={0.5} columnWidth={0.75}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

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.

index.jsx
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, BarSeries, DataLabel } from '@syncfusion/ej2-react-charts';
const data1 = [
    { x: '2012', y: 104 },
    { x: '2016', y: 121 },
    { x: '2020', y: 113 },
];
const data2 = [
    { x: '2012', y: 46 },
    { x: '2016', y: 46 },
    { x: '2020', y: 39 },
];
const data3 = [
    { x: '2012', y: 65 },
    { x: '2016', y: 67 },
    { x: '2020', y: 65 },
];
const data4 = [
    { x: '2012', y: 29 },
    { x: '2016', y: 27 },
    { x: '2020', y: 22 },
];
const data5 = [
    { x: '2012', y: 91 },
    { x: '2016', y: 70 },
    { x: '2020', y: 88 },
];
const data6 = [
    { x: '2012', y: 38 },
    { x: '2016', y: 26 },
    { x: '2020', y: 38 },
];
function App() {
    return (<ChartComponent id="charts" style={{ textAlign: 'center' }} primaryXAxis={{
            valueType: 'Category',
            interval: 1,
            majorGridLines: { width: 0 },
        }} primaryYAxis={{
            majorGridLines: { width: 0 },
            majorTickLines: { width: 0 },
            lineStyle: { width: 0 },
            labelStyle: { color: 'transparent' },
        }} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true }} title="Olympics Medal Tally">
        <Inject services={[BarSeries, Legend, Tooltip, Category, DataLabel]}/>
        <SeriesCollectionDirective>
          <SeriesDirective dataSource={data1} xName="x" yName="y" name="USA Total" type="Bar" groupName="USA" columnWidth={0.7} columnSpacing={0.1} marker={{
            dataLabel: {
                visible: true,
                position: 'Top',
                font: { fontWeight: '600', color: '#ffffff' },
            },
        }}></SeriesDirective>
          <SeriesDirective dataSource={data2} xName="x" yName="y" name="USA Gold" type="Bar" groupName="USA" columnWidth={0.5} columnSpacing={0.1} marker={{
            dataLabel: {
                visible: true,
                position: 'Top',
                font: { fontWeight: '600', color: '#ffffff' },
            },
        }}></SeriesDirective>
          <SeriesDirective dataSource={data3} xName="x" yName="y" name="UK Total" type="Bar" groupName="UK" columnWidth={0.7} columnSpacing={0.1} marker={{
            dataLabel: {
                visible: true,
                position: 'Top',
                font: { fontWeight: '600', color: '#ffffff' },
            },
        }}></SeriesDirective>
          <SeriesDirective dataSource={data4} xName="x" yName="y" name="UK Gold" type="Bar" groupName="UK" columnWidth={0.5} columnSpacing={0.1} marker={{
            dataLabel: {
                visible: true,
                position: 'Top',
                font: { fontWeight: '600', color: '#ffffff' },
            },
        }}></SeriesDirective>
          <SeriesDirective dataSource={data5} xName="x" yName="y" name="China Total" type="Bar" groupName="China" columnWidth={0.7} columnSpacing={0.1} marker={{
            dataLabel: {
                visible: true,
                position: 'Top',
                font: { fontWeight: '600', color: '#ffffff' },
            },
        }}></SeriesDirective>
          <SeriesDirective dataSource={data6} xName="x" yName="y" name="China Gold" type="Bar" groupName="China" columnWidth={0.5} columnSpacing={0.1} marker={{
            dataLabel: {
                visible: true,
                position: 'Top',
                font: { fontWeight: '600', color: '#ffffff' },
            },
        }}></SeriesDirective>
        </SeriesCollectionDirective>
      </ChartComponent>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  ChartComponent,
  SeriesCollectionDirective,
  SeriesDirective,
  Inject,
  Legend,
  Category,
  Tooltip,
  BarSeries,
  DataLabel }
from'@syncfusion/ej2-react-charts';

const data1 = [
  { x: '2012', y: 104 },
  { x: '2016', y: 121 },
  { x: '2020', y: 113 },
];
const data2 = [
  { x: '2012', y: 46 },
  { x: '2016', y: 46 },
  { x: '2020', y: 39 },
];
const data3 = [
  { x: '2012', y: 65 },
  { x: '2016', y: 67 },
  { x: '2020', y: 65 },
];
const data4 = [
  { x: '2012', y: 29 },
  { x: '2016', y: 27 },
  { x: '2020', y: 22 },
];
const data5 = [
  { x: '2012', y: 91 },
  { x: '2016', y: 70 },
  { x: '2020', y: 88 },
];
const data6 = [
  { x: '2012', y: 38 },
  { x: '2016', y: 26 },
  { x: '2020', y: 38 },
];
function App() {
    return (
      <ChartComponent
        id="charts"
        style={{ textAlign: 'center' }}
        primaryXAxis={{
          valueType: 'Category',
          interval: 1,
          majorGridLines: { width: 0 },
        }}
        primaryYAxis={{
          majorGridLines: { width: 0 },
          majorTickLines: { width: 0 },
          lineStyle: { width: 0 },
          labelStyle: { color: 'transparent' },
        }}
        chartArea={{ border: { width: 0 } }}
        tooltip={{ enable: true }}
        title="Olympics Medal Tally"
      >
        <Inject
          services={[BarSeries, Legend, Tooltip, Category, DataLabel]}
        />
        <SeriesCollectionDirective>
          <SeriesDirective
            dataSource={data1}
            xName="x"
            yName="y"
            name="USA Total"
            type="Bar"
            groupName="USA"
            columnWidth={0.7}
            columnSpacing={0.1}
            marker={{
              dataLabel: {
                visible: true,
                position: 'Top',
                font: { fontWeight: '600', color: '#ffffff' },
              },
            }}
          ></SeriesDirective>
          <SeriesDirective
            dataSource={data2}
            xName="x"
            yName="y"
            name="USA Gold"
            type="Bar"
            groupName="USA"
            columnWidth={0.5}
            columnSpacing={0.1}
            marker={{
              dataLabel: {
                visible: true,
                position: 'Top',
                font: { fontWeight: '600', color: '#ffffff' },
              },
            }}
          ></SeriesDirective>
          <SeriesDirective
            dataSource={data3}
            xName="x"
            yName="y"
            name="UK Total"
            type="Bar"
            groupName="UK"
            columnWidth={0.7}
            columnSpacing={0.1}
            marker={{
              dataLabel: {
                visible: true,
                position: 'Top',
                font: { fontWeight: '600', color: '#ffffff' },
              },
            }}
          ></SeriesDirective>
          <SeriesDirective
            dataSource={data4}
            xName="x"
            yName="y"
            name="UK Gold"
            type="Bar"
            groupName="UK"
            columnWidth={0.5}
            columnSpacing={0.1}
            marker={{
              dataLabel: {
                visible: true,
                position: 'Top',
                font: { fontWeight: '600', color: '#ffffff' },
              },
            }}
          ></SeriesDirective>
          <SeriesDirective
            dataSource={data5}
            xName="x"
            yName="y"
            name="China Total"
            type="Bar"
            groupName="China"
            columnWidth={0.7}
            columnSpacing={0.1}
            marker={{
              dataLabel: {
                visible: true,
                position: 'Top',
                font: { fontWeight: '600', color: '#ffffff' },
              },
            }}
          ></SeriesDirective>
          <SeriesDirective
            dataSource={data6}
            xName="x"
            yName="y"
            name="China Gold"
            type="Bar"
            groupName="China"
            columnWidth={0.5}
            columnSpacing={0.1}
            marker={{
              dataLabel: {
                visible: true,
                position: 'Top',
                font: { fontWeight: '600', color: '#ffffff' },
              },
            }}
          ></SeriesDirective>
        </SeriesCollectionDirective>
      </ChartComponent>
    );

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

Cylindrical bar chart

To render a cylindrical bar chart, set the columnFacet property to Cylinder in the chart series.

index.jsx
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, BarSeries } from '@syncfusion/ej2-react-charts';
import { cylindricalData } from 'datasource.ts';
function App() {
    const primaryxAxis = { minimum: 2005, maximum: 2012, interval: 1 };
    const primaryyAxis = {
      minimum: 3, 
      maximum: 12,
      interval: 1,
      title: 'Percentage'
    };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Unemployment rate in percentage'>
      <Inject services={[BarSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={cylindricalData} xName='x' yName='y' name='India' type='Bar' columnFacet='Cylinder'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, BarSeries,  Selection}
from'@syncfusion/ej2-react-charts';
import { cylindricalData } from 'datasource.ts';

function App() {

  const primaryxAxis: AxisModel = { minimum: 2005, maximum: 2012, interval: 1 };
  const primaryyAxis: AxisModel = {
    minimum: 3, 
    maximum: 12,
    interval: 1,
    title: 'Percentage'
  };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Unemployment rate in percentage'>
      <Inject services={[BarSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={cylindricalData} xName='x' yName='y' name='India' type='Bar' columnFacet='Cylinder'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

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.

index.jsx
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, BarSeries } from '@syncfusion/ej2-react-charts';
import { customData } from 'datasource.ts';
function App() {
    const primaryxAxis = { minimum: 2005, maximum: 2012, interval: 1, title: 'Year' };
    const primaryyAxis = {
        minimum: 3, maximum: 12, interval: 1, title: 'Percentage',
        labelFormat: '{value}%'
    };
    const border = { color: 'brown', width: 2 };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Unemployment rate (%)'>
      <Inject services={[BarSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={customData} xName='x' yName='y' type='Bar' pointColorMapping= 'point' dashArray='2' border={border}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, BarSeries,  Selection}
from'@syncfusion/ej2-react-charts';
import { customData } from 'datasource.ts';

function App() {

  const primaryxAxis: AxisModel = { minimum: 2005, maximum: 2012, interval: 1, title: 'Year' };
  const primaryyAxis: AxisModel = {
    minimum: 3, maximum: 12, interval: 1, title: 'Percentage',
    labelFormat: '{value}%'
  };
  const border = { color: 'brown', width: 2 };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Unemployment rate (%)'>
      <Inject services={[BarSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={customData} xName='x' yName='y' type='Bar'
         border={border} pointColorMapping= 'point' dashArray='2'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

Bar Charts in React Chart component

Bar

Bar space and width

Grouped bar

Cylindrical bar chart

Series customization

See also