69 lines
2.2 KiB
JavaScript
69 lines
2.2 KiB
JavaScript
'use client';
|
|
|
|
import { LineChart, lineElementClasses } from "@mui/x-charts"
|
|
|
|
function Chart({ data }) {
|
|
return (
|
|
<LineChart
|
|
xAxis={[{
|
|
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
|
|
disableLine: true,
|
|
disableTicks: true,
|
|
}]}
|
|
series={[
|
|
{
|
|
id: 'income',
|
|
data: data.chart_amount_income,
|
|
area: true,
|
|
showMark: false,
|
|
},
|
|
]}
|
|
yAxis={[{
|
|
disableLine: true,
|
|
disableTicks: true
|
|
}]}
|
|
margin={{
|
|
left: 60,
|
|
right: 50,
|
|
top: 10,
|
|
bottom: 60,
|
|
}}
|
|
sx={{
|
|
[`& .${lineElementClasses.root}`]: {
|
|
strokeWidth: 3,
|
|
stroke: '#5559CE'
|
|
},
|
|
'& .MuiAreaElement-series-income': {
|
|
fill: "url('#myGradient') !important",
|
|
},
|
|
'& .MuiChartsAxis-directionY .MuiChartsAxis-tickLabel': {
|
|
fontSize: '14px !important',
|
|
fontWeight: '400 !important',
|
|
fill: '#858D9D'
|
|
},
|
|
'& .MuiChartsAxis-directionX .MuiChartsAxis-tickLabel': {
|
|
fontSize: '10px !important',
|
|
fontWeight: '400 !important',
|
|
fill: '#7E7E7E'
|
|
},
|
|
'& .MuiChartsGrid-line': {
|
|
strokeDasharray: 2
|
|
},
|
|
'& .MuiChartsAxis-directionY': {
|
|
// transform: 'translateX(-50px) !important'
|
|
}
|
|
}}
|
|
grid={{ horizontal: true }}
|
|
className='!w-full !mt-[20px] !h-[250px]'
|
|
>
|
|
<defs>
|
|
<linearGradient id="myGradient" x1="252.5" y1="0" x2="252.5" y2="145" gradientUnits="userSpaceOnUse">
|
|
<stop stopColor="#3A6FF8" stopOpacity="0.1" />
|
|
<stop offset="1" stopColor="#3A6FF8" stopOpacity="0.02" />
|
|
</linearGradient>
|
|
</defs>
|
|
</LineChart>
|
|
)
|
|
}
|
|
|
|
export default Chart |