81 lines
3.3 KiB
TypeScript
81 lines
3.3 KiB
TypeScript
import React, { Component } from 'react';
|
|
import ReactApexChart from 'react-apexcharts';
|
|
|
|
interface State {
|
|
series: { name: string; data: number[] }[];
|
|
options: {
|
|
chart: { type: string; height: number };
|
|
plotOptions: { bar: { colors: { ranges: { from: number; to: number; color: string }[] }; columnWidth: string } };
|
|
dataLabels: { enabled: boolean };
|
|
yaxis: { title: { text: string }; labels: { formatter: (y: number) => string } };
|
|
xaxis: { type: string; categories: string[]; labels: { rotate: number } };
|
|
};
|
|
}
|
|
|
|
class ApexChartColumn extends Component<{}, State> {
|
|
render() {
|
|
return (
|
|
<div>
|
|
<div id="chart">
|
|
<ReactApexChart
|
|
options={
|
|
{
|
|
chart: { type: 'bar', height: 350, zoom: { enabled: false } },
|
|
plotOptions: {
|
|
bar: {
|
|
colors: {
|
|
ranges: [
|
|
{
|
|
from: -100,
|
|
to: 0,
|
|
color: '#57c0fd'
|
|
},
|
|
{
|
|
from: 0,
|
|
to: 100,
|
|
color: '#6484fd',
|
|
|
|
},
|
|
],
|
|
},
|
|
columnWidth: '20%',
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
yaxis: {
|
|
|
|
labels: {
|
|
formatter: (y: any) => {
|
|
return y.toFixed(0);
|
|
},
|
|
},
|
|
},
|
|
xaxis: {
|
|
type: 'datetime',
|
|
categories: [
|
|
'2020-05-01', '2020-05-02', '2020-05-03', '2020-05-04', '2020-05-05',
|
|
],
|
|
labels: {
|
|
rotate: -90,
|
|
},
|
|
},
|
|
|
|
}}
|
|
series={[
|
|
{
|
|
name: 'Earning This Month ',
|
|
data: [
|
|
1.45, 5.9, -0.42, -12.6, -18.1
|
|
],
|
|
},
|
|
]} type="bar" height={350} />
|
|
</div>
|
|
<div id="html-dist"></div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default ApexChartColumn; |