40 lines
1.1 KiB
JavaScript
40 lines
1.1 KiB
JavaScript
import React from 'react';
|
|
import { Line } from 'react-chartjs-2';
|
|
import { Box, Typography } from '@mui/material';
|
|
import '../style/Chart.css';
|
|
|
|
const ChartBox = () => {
|
|
const data = {
|
|
labels: ['Jan 01', 'Jan 02', 'Jan 03', 'Jan 04', 'Jan 05', 'Jan 06'],
|
|
datasets: [
|
|
{
|
|
label: 'Cash In',
|
|
data: [50, 75, 200, 125, 150, 175],
|
|
backgroundColor: 'rgba(75,192,192,0.4)',
|
|
borderColor: 'rgba(75,192,192,1)',
|
|
fill: true, // No fill under the line
|
|
tension: 0.5, // Line curve
|
|
},
|
|
{
|
|
label: 'Cash Out',
|
|
data: [100, 90, 80, 70, 60, 50],
|
|
backgroundColor: 'rgba(255,99,132,0.4)',
|
|
borderColor: 'rgba(255,99,132,1)',
|
|
fill: true, // No fill under the line
|
|
tension: 0.5, // Line curve
|
|
},
|
|
],
|
|
};
|
|
|
|
return (
|
|
<Box sx={{ padding: 2, backgroundColor: '#fff', borderRadius: 2, boxShadow: 1 }}>
|
|
<Typography variant="h6" sx={{ marginBottom: 2 }}>
|
|
Account Activities
|
|
</Typography>
|
|
<Line data={data} />
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default ChartBox;
|