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
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;
|
|
|