Bar chart in react js

• Create Components folder under src folder
• Add BarChartInReactJs.js file and add below Code

import React, { Component } from "react";

import Chart from "react-apexcharts";

class BarChartInReactJs extends Component {

constructor(props) {

super(props);

this.state = {

options: {

chart: {

id: "basic-bar"

},

xaxis: {

categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]

}

},

series: [

{

name: "series-1",

data: [80, 40, 45, 90, 99, 80, 66, 91]

}

]

};

}

render() {

return (

<div className="app">

<div className="row">

<div className="mixed-chart">

<Chart

options={this.state.options}

series={this.state.series}

type="bar"

width="500"

/>

</div>

</div>

</div>

);

}

}

export default BarChartInReactJs;

• Open App.js file and update code as below

import React from "react";

import "./styles.css";

import BarChartInReactJs from "./Components/BarChartInReactJs";

export default function App() {

return (

<div className="App">

<BarChartInReactJs />

</div>

);

}

Output