Interactive Recharts Code Generator & Maker

'use client';
import {
  ResponsiveContainer, XAxis, YAxis, CartesianGrid, Tooltip, Legend, BarChart, Bar
} from 'recharts';

const data = [
  { name: 'Jan', primary: 420, secondary: 280, volume: 510 },
  { name: 'Feb', primary: 680, secondary: 340, volume: 720 },
  { name: 'Mar', primary: 510, secondary: 410, volume: 640 },
  { name: 'Apr', primary: 890, secondary: 520, volume: 980 },
  { name: 'May', primary: 740, secondary: 480, volume: 830 },
  { name: 'Jun', primary: 960, secondary: 610, volume: 1100 },
];

export default function CustomChart() {
  return (
    <ResponsiveContainer width="100%" height={320}>
      <BarChart
        data={data}
        margin={{ top: 16, right: 16, left: 0, bottom: 0 }}
      >
        <CartesianGrid strokeDasharray="3 3" stroke="#1e2328" />
        <XAxis dataKey="name" stroke="#5c6370" />
        <YAxis stroke="#5c6370" />
        <Tooltip contentStyle={{ background: "#13161a", border: "1px solid #2a3038", borderRadius: 8 }} />
        <Legend wrapperStyle={{ fontSize: 12, color: "#5c6370" }} />
        <Bar dataKey="primary" name="Metric A" fill="#00e5a0" radius={[6, 6, 0, 0]} />
        <Bar dataKey="secondary" name="Metric B" fill="#4a9eff" radius={[6, 6, 0, 0]} />
      </BarChart>
    </ResponsiveContainer>
  );
}