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

The material UI is a popular CSS library that we can use to style the React application. It contains various pre-styled React components that we can use directly in the application by importing them into the code.

The 'dx-react-chart-material-ui’ is an NPM package of Devexpress that can connect the material-ui and ‘dx-react-chart’ library of dev express. The ‘dx-react-chart’ is used to create a chart, and material UI is used to style the chart.

Users can execute the below command to install the material UI in the React application.

npm install @mui/material @emotion/react @emotion/styled

Also, execute the below command to install the Devexpress NPM package.

npm i @devexpress/dx-react-chart

Syntax

Users can follow the syntax below to create a bar chart using Devexpress.

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

In the above syntax, we use the ‘Chart’, ‘BarSeries’, and ‘Title’ components of the DevExpress. The ‘Chart’ component shows the chart, the ‘BarSeries’ component shows the bar chart and the ‘Title’ component shows the title.

Example 1 (Simple Bar Chart)

In the example below, we imported the ‘Paper’ component from the Material UI. Also, we have imported the required components from the ‘devexpress’ NPM package.

We have also defined the data[] array containing the chart data. It contains the fruit's name and its price. We create a simple bar chart to compare the fruit price. In the output, users can observe the bar chart.

import React, { useState } 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>
            Creating the{" "}
            bar chart using the <i>  devexpress NPM   package and material UI </i>
         </h2>
         <Paper>
            <Chart data = {data}>
               <ArgumentAxis />
               <ValueAxis max = {200} />
               <BarSeries valueField = "price" argumentField = "fruit" />
               <Title text = "Fruit Price" />
               <Animation />
            </Chart>
         </Paper>
      </div>
   );
}
export default App;

Output

Example 2 (Side-by-side Bar Chart)

In the example below, we have demonstrated to create a side-by-side bar chart. The data contains material names and prices according to the color.

The chart contains a series of 3 bars for a single material, each representing a different color. We have used the ‘Barseries’ component to create a single bar for each material. Also, we have set the title for the component.

In the output, users can observe the side-by-side bar chart when each bar compares the price of the different material according to the color.

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 = [
   { 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>
         Creating the{" "}
         stacked bar chart using the <i> devexpress NPM package and material UI </i>
      </h2>
      <Paper>
         <Chart data = {chartData}>
            <ArgumentAxis />
            <ValueAxis />

            <BarSeries
               Name = "yellow color"
               valueField = "yellow"
               argumentField = "material"
               color = "#ffd700"
            />
            <BarSeries
               Name = "Silver color"
               valueField = "silver"
               argumentField = "material"
               color = "#c0c0c0"
            />
            <BarSeries
               Name = "grey color"
               valueField = "grey"
               argumentField = "material"
               color = "grey"
            />
            <Animation />
            <Legend position = "bottom" />
            <Title text = "Price of Materials" />
            <Stack />
         </Chart>
         </Paper>
      </div>
   );
}
export default App;

Output

Example 3 (Stacked Bar Chart)

In the example below, we demonstrated to create a stacked bar chart. We have prepared population, vehicles, houses, and shops data according to state wise to create a bar chart.

In the example below, we demonstrated to create a stacked bar chart. We have prepared population, vehicles, houses, and shops data according to state wise to create a bar chart.

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>
            Creating the{" "}
            <i>
               Stacked bar chart using the devexpress NPM package and Material UI.
            </i>
         </h2>
         <Paper>
            <Chart data = {chartData}>
               <ArgumentAxis />
               <ValueAxis max = {50000000} />

               <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" />
               <Stack stacks = {[{ series: ["Population", "Vehicles", "Houses", "Shops"] }]} />
            </Chart>
         </Paper>
      </div>
   );
}

export default App;

Output

We learned to use the Devexpress and Material UI libraries to create and design the chart. The Devexpress NPM package is the bridge between Material UI and the chart library of Devexpress. Also, we learned to create various types of bar charts in this tutorial.