69 lines
No EOL
1.2 KiB
TypeScript
69 lines
No EOL
1.2 KiB
TypeScript
"use client"
|
|
|
|
import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"
|
|
|
|
const data = [
|
|
{
|
|
name: "Jan",
|
|
In: 4000,
|
|
Out: 2400,
|
|
},
|
|
{
|
|
name: "Feb",
|
|
In: 3000,
|
|
Out: 1398,
|
|
},
|
|
{
|
|
name: "Mar",
|
|
In: 2000,
|
|
Out: 9800,
|
|
},
|
|
{
|
|
name: "Apr",
|
|
In: 2780,
|
|
Out: 3908,
|
|
},
|
|
{
|
|
name: "May",
|
|
In: 1890,
|
|
Out: 4800,
|
|
},
|
|
{
|
|
name: "Jun",
|
|
In: 2390,
|
|
Out: 3800,
|
|
},
|
|
{
|
|
name: "Jul",
|
|
In: 3490,
|
|
Out: 4300,
|
|
},
|
|
]
|
|
|
|
export function StockChart() {
|
|
return (
|
|
<div className="h-[300px] w-full">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart
|
|
width={500}
|
|
height={300}
|
|
data={data}
|
|
margin={{
|
|
top: 5,
|
|
right: 30,
|
|
left: 20,
|
|
bottom: 5,
|
|
}}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="name" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Legend />
|
|
<Bar dataKey="In" fill="#000000" name="Stock In" />
|
|
<Bar dataKey="Out" fill="#FFA500" name="Stock Out" />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
)
|
|
} |