You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

76 lines
1.5 KiB

import React, { Component } from "react";
// import ReactApexChart from "react-apexcharts";
// import ReactApexChart from "apexcharts";
import Chart from "react-apexcharts";
class BarChartApex extends Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
background: "#f4f4f4",
foreColor: "#333",
},
xaxis: {
categories: [
"New York",
"Los Angeles",
"Chicago",
"Houston",
"Philadelphia",
"Phoenix",
"San Antonio",
"San Diego",
"Dallas",
"San Jose",
],
},
plotOptions: {
bar: {
horizontal: false,
},
},
fill: {
colors: ["#F44336"],
},
dataLabels: {
enabled: false,
},
title: {
text: "Largest US Cities By Population",
align: "center",
margin: 20,
offsetY: 20,
style: {
fontSize: "25px",
},
},
},
series: [
{
name: "Population",
data: [
8550405, 3971883, 2720546, 2296224, 1567442, 1563025, 1469845,
1394928, 1300092, 1026908,
],
},
],
};
}
render() {
return (
<Chart
options={this.state.options}
series={this.state.series}
type="bar"
height="450"
width="100%"
/>
);
}
}
export default BarChartApex;