How to create bar chart in react using material UI and Devexpress?

Material UI is a popular React UI library that provides pre-styled components for building modern applications. DevExpress offers the 'dx-react-chart-material-ui' package that seamlessly integrates Material UI styling with powerful charting capabilities.

This tutorial demonstrates how to create various types of bar charts using DevExpress charts with Material UI styling in React applications.

Prerequisites

Install the required packages using these commands:

npm install @mui/material @emotion/react @emotion/styled
npm install @devexpress/dx-react-chart @devexpress/dx-react-chart-material-ui

Basic Syntax

The basic structure for creating a DevExpress bar chart with Material UI:

<Chart data={data}>
   <ArgumentAxis />
   <ValueAxis />
   <BarSeries valueField="price" argumentField="fruit" />
   <Title text="Chart Title" />
</Chart>

The Chart component wraps the entire chart, BarSeries creates the bar visualization, and Title adds a chart title.

Example 1: Simple Bar Chart

This example creates a basic bar chart comparing fruit prices using Material UI's Paper component for styling:

import React from "react";
import Paper from "@mui/material/Paper";
import {
   Chart,
   BarSeries,
   Title,
   ArgumentAxis,
   ValueAxis,
} from "@devexpress/dx-react-chart-material-ui";
import { Animation } from "@devexpress/dx-react-chart";

const data = [
   { fruit: "Apple", price: 150 },
   { fruit: "Orange", price: 250 },
   { fruit: "Banana", price: 100 },
   { fruit: "Mango", price: 200 },
   { fruit: "Grapes", price: 50 },
   { fruit: "Pineapple", price: 90 },
   { fruit: "Watermelon", price: 170 },
   { fruit: "Papaya", price: 120 },
   { fruit: "Guava", price: 80 },
];

function App() {
   return (
      <div>
         <h2>Fruit Price Comparison Chart</h2>
         <Paper elevation={3} style={{ padding: 16 }}>
            <Chart data={data}>
               <ArgumentAxis />
               <ValueAxis max={300} />
               <BarSeries valueField="price" argumentField="fruit" />
               <Title text="Fruit Prices (? per kg)" />
               <Animation />
            </Chart>
         </Paper>
      </div>
   );
}

export default App;

Example 2: Grouped Bar Chart

This example demonstrates a grouped bar chart comparing material prices by color variants:

import React from "react";
import Paper from "@mui/material/Paper";
import {
   Chart,
   BarSeries,
   Title,
   ArgumentAxis,
   ValueAxis,
   Legend,
} from "@devexpress/dx-react-chart-material-ui";
import { Animation } from "@devexpress/dx-react-chart";

const chartData = [
   { material: "Aluminium", yellow: 3000, silver: 3200, grey: 2900 },
   { material: "Copper", yellow: 2300, silver: 2700, grey: 1900 },
   { material: "Steel", yellow: 1400, silver: 2100, grey: 1700 },
   { material: "Iron", yellow: 2200, silver: 1700, grey: 2800 },
];

function App() {
   return (
      <div>
         <h2>Material Price Comparison by Color</h2>
         <Paper elevation={3} style={{ padding: 16 }}>
            <Chart data={chartData}>
               <ArgumentAxis />
               <ValueAxis />
               <BarSeries
                  name="Yellow"
                  valueField="yellow"
                  argumentField="material"
                  color="#ffd700"
               />
               <BarSeries
                  name="Silver"
                  valueField="silver"
                  argumentField="material"
                  color="#c0c0c0"
               />
               <BarSeries
                  name="Grey"
                  valueField="grey"
                  argumentField="material"
                  color="#808080"
               />
               <Animation />
               <Legend position="bottom" />
               <Title text="Material Prices by Color Variant" />
            </Chart>
         </Paper>
      </div>
   );
}

export default App;

Example 3: Stacked Bar Chart

This example creates a stacked bar chart showing state-wise data with multiple categories stacked on top of each other:

import React from "react";
import Paper from "@mui/material/Paper";
import {
   Chart,
   BarSeries,
   Title,
   ArgumentAxis,
   ValueAxis,
   Legend,
} from "@devexpress/dx-react-chart-material-ui";
import { Stack, Animation } from "@devexpress/dx-react-chart";

const chartData = [
   { state: "Gujarat", population: 3938223, vehicles: 3456800, houses: 2535447, shops: 454464 },
   { state: "Maharashtra", population: 2446456, vehicles: 3864500, houses: 6485534, shops: 344654 },
   { state: "Rajasthan", population: 2332543, vehicles: 4756549, houses: 981496, shops: 545621 },
   { state: "Punjab", population: 3434657, vehicles: 5686564, houses: 4569847, shops: 448734 },
];

function App() {
   return (
      <div>
         <h2>State-wise Demographics (Stacked Chart)</h2>
         <Paper elevation={3} style={{ padding: 16 }}>
            <Chart data={chartData}>
               <ArgumentAxis />
               <ValueAxis />
               <BarSeries
                  name="Population"
                  valueField="population"
                  argumentField="state"
                  color="#8884d8"
               />
               <BarSeries
                  name="Vehicles"
                  valueField="vehicles"
                  argumentField="state"
                  color="#82ca9d"
               />
               <BarSeries
                  name="Houses"
                  valueField="houses"
                  argumentField="state"
                  color="#ffc658"
               />
               <BarSeries
                  name="Shops"
                  valueField="shops"
                  argumentField="state"
                  color="#ff7f50"
               />
               <Animation />
               <Legend position="bottom" />
               <Title text="State-wise Data Distribution" />
               <Stack stacks={[{ series: ["Population", "Vehicles", "Houses", "Shops"] }]} />
            </Chart>
         </Paper>
      </div>
   );
}

export default App;

Key Components

Conclusion

DevExpress with Material UI provides a powerful combination for creating professional bar charts in React. The integration offers Material Design styling with flexible charting capabilities for various data visualization needs.