React Charts - Standard Bar

This demo shows the standard bar series type that visualizes data as a collection of bars. Follow the steps below to create and configure the Bar chart.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

TS JS

Backend API

import React from 'react'; import { Chart, Series } from 'devextreme-react/chart'; import { dataSource } from './data.ts'; function App() { return ( <Chart id="chart" dataSource={dataSource}> <Series valueField="oranges" argumentField="day" name="My oranges" type="bar" color="#ffaa66" /> </Chart> ); } export default App;

import React from 'react'; import { Chart, Series } from 'devextreme-react/chart'; import { dataSource } from './data.js'; function App() { return ( <Chart id="chart" dataSource={dataSource} > <Series valueField="oranges" argumentField="day" name="My oranges" type="bar" color="#ffaa66" /> </Chart> ); } export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

export const dataSource = [{ day: 'Monday', oranges: 3, }, { day: 'Tuesday', oranges: 2, }, { day: 'Wednesday', oranges: 3, }, { day: 'Thursday', oranges: 4, }, { day: 'Friday', oranges: 6, }, { day: 'Saturday', oranges: 11, }, { day: 'Sunday', oranges: 4, }];

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

export const dataSource = [ { day: 'Monday', oranges: 3, }, { day: 'Tuesday', oranges: 2, }, { day: 'Wednesday', oranges: 3, }, { day: 'Thursday', oranges: 4, }, { day: 'Friday', oranges: 6, }, { day: 'Saturday', oranges: 11, }, { day: 'Sunday', oranges: 4, }, ];

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.2.3/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

#chart { height: 440px; }

Bind to Data

You can bind the Bar chart to one of the following data sources:

In this demo, the Bar chart is populated with data taken from a simple JavaScript array.

Configure Series

Assign one or several series to the series property and specify the following settings:

The series type
Data source fields. Assign an appropriate field name to the argumentField and valueField properties if you want to bind a series to data directly. Alternatively, you can use a series template to bind series to data if a data source field contains names for series.
Optional. The barWidth property to specify individual series' bar width. See the Specify the Bar Width article for more information.

You can also use the commonSeriesSettings object to configure all series in the Bar chart.

Customize Bar Chart

You can show point labels to make the Bar chart more informative.

To help a user identify a series among others on the chart legend, specify its name.

If you want to change the default series color, use the color property.