ScatterPlot.tsx

import {
  ScatterChart,
  Scatter,
  XAxis,
  YAxis,
  Tooltip,
  CartesianGrid,
  ResponsiveContainer
} from 'recharts';

type Point = { commune: string; taux: number; volume: number };

export default function ScatterPlot({ data }: { data: Point[] }) {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <ScatterChart margin={{ top: 12, right: 24, left: 0, bottom: 12 }}>
        <CartesianGrid />
        <XAxis type="number" dataKey="taux" name="Taux" unit="" label={{ value: 'Taux (%)', position: 'insideBottom', offset: -5 }} />
        <YAxis type="number" dataKey="volume" name="Volume" unit="€" label={{ value: 'Volume (€)', angle: -90, position: 'insideLeft' }} />
        <Tooltip cursor={{ strokeDasharray: '3 3' }} formatter={(v: any) => (typeof v === 'number' ? new Intl.NumberFormat('fr-FR').format(v) : v)} />
        <Scatter name="Communes" data={data} fill="#0B5FFF" />
      </ScatterChart>
    </ResponsiveContainer>
  );
}