74 lines
2.7 KiB
TypeScript
74 lines
2.7 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 ApexChartLineArea extends Component<{}, State> {
|
|
render() {
|
|
return (
|
|
<div id="chart" className='w-[377px] translate-y-6 -translate-x-6'>
|
|
<ReactApexChart
|
|
options={
|
|
{
|
|
chart: {
|
|
height: 50,
|
|
type: 'area',
|
|
zoom: {
|
|
enabled: false
|
|
},
|
|
toolbar: {
|
|
show: false, // Menampilkan toolbar
|
|
|
|
}
|
|
},
|
|
stroke: {
|
|
curve: 'smooth'
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
fill: {
|
|
type: 'light',
|
|
opacity: [0.35, 0],
|
|
},
|
|
markers: {
|
|
size: 0
|
|
},
|
|
xaxis: {
|
|
labels: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
show: false
|
|
}
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
grid: {
|
|
show: false
|
|
}
|
|
}}
|
|
series={[{
|
|
name: 'Monthly Earning',
|
|
data: [25, 55, 20, 40, 12, 60, 20]
|
|
}]}
|
|
type="area" height={90}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default ApexChartLineArea; |