How to create a bar chart in React using Material UI and Devexpress?

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

'dx-react-chart-material-ui' is an NPM package of Devexpress that can connect devexpress's material-ui and 'dx-react-chart' libraries. "dx-react-chart" is used to create charts and Material UI is used to style charts.

Users can execute the following command to install Material UI in React applications.

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

Additionally, execute the following command to install the Devexpress NPM package.

npm i @devexpress/dx-react-chart

grammar

Users can create bar charts using Devexpress according to the following syntax.

<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 DevExpress. The "Chart" component displays a chart, the "BarSeries" component displays a bar chart, and the "Title" component displays a title.

Example 1 (simple bar chart)

In the example below, we imported the "Paper" component from Material UI. Additionally, we imported the required components from the "devexpress" NPM package.

We also define the data[] array containing the chart data. It contains the name and price of the fruit. Let's create a simple bar chart to compare fruit prices. In the output, the user can observe the bar graph.

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 demonstrate how to create a side-by-side bar chart. The data contains material name and price according to color.

This chart contains a series of 3 bars for a single material, each bar representing a different color. We use the "Barseries" component to create a bar for each material. Additionally, we set the component's title.

In the output, the user can observe side-by-side bar charts, each bar comparing the prices of different materials based on 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 demonstrate how to create a stacked bar chart. We prepared population, vehicle, house and store data by state to create bar charts.

In the example below, we demonstrate how to create a stacked bar chart. We prepared population, vehicle, house and store data by state to create bar charts.

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 create and design charts using Devexpress and Material UI libraries. The Devexpress NPM package is a bridge between Material UI and the Devexpress charting library. Additionally, we learned about creating various types of bar charts in this tutorial.

The above is the detailed content of How to create a bar chart in React using Material UI and Devexpress?. For more information, please follow other related articles on the PHP Chinese website!