victorAnumudu
48 lines
1.2 KiB
React
48 lines
1.2 KiB
React
import React from 'react'
|
|
import ReactApexChart from 'react-apexcharts';
|
|
|
|
export default function AreaChart() {
|
|
|
|
var options = {
|
|
series: [{
|
|
name: 'value',
|
|
data: [31, 40, 28, 51, 42, 109, 100]
|
|
},
|
|
// {
|
|
// name: 'series2',
|
|
// data: [11, 32, 45, 32, 34, 52, 41]
|
|
// }
|
|
],
|
|
options:{
|
|
chart: {
|
|
height: 350,
|
|
type: 'area',
|
|
zoom: {
|
|
enabled: false
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
curve: 'smooth'
|
|
},
|
|
xaxis: {
|
|
// type: 'datetime',
|
|
// categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
|
|
type: 'text',
|
|
categories: ["mon", "tues", "wed", "thur", "fri", "sat", "sun"]
|
|
},
|
|
// tooltip: {
|
|
// x: {
|
|
// format: 'dd/MM/yy HH:mm'
|
|
// },
|
|
// },
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ReactApexChart {...options} type="area" height={'60%'} className='w-full' />
|
|
)
|
|
}
|