Реалізація інтерактивних графіків та діаграм (Chart.js/D3.js/Recharts) на сайті

Реалізація графіків та діаграм: Chart.js, D3.js, Recharts

Візуалізація даних потребує вибору правильного інструменту для задачі: Chart.js для стандартних графіків, Recharts для React екосистеми, D3.js для користувацьких візуалізацій.

Chart.js: лінійні та стовпчасті графіки

import { Chart, registerables } from 'chart.js';
import 'chartjs-adapter-date-fns';

Chart.register(...registerables);

function RevenueChart({ data }: { data: { date: string; revenue: number }[] }) {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const ctx = canvasRef.current?.getContext('2d');
    if (!ctx) return;

    const chart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: data.map(d => d.date),
        datasets: [{
          label: 'Daily Revenue',
          data: data.map(d => d.revenue),
          borderColor: 'rgb(75, 192, 192)',
          tension: 0.1,
          fill: false,
        }],
      },
      options: {
        responsive: true,
        plugins: {
          legend: { position: 'top' },
        },
        scales: {
          y: { beginAtZero: true },
        },
      },
    });

    return () => chart.destroy();
  }, [data]);

  return <canvas ref={canvasRef} />;
}

Recharts: React-First

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

function DashboardChart({ data }: { data: any[] }) {
  return (
    <LineChart width={800} height={400} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="date" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Line type="monotone" dataKey="revenue" stroke="#8884d8" />
      <Line type="monotone" dataKey="users" stroke="#82ca9d" />
    </LineChart>
  );
}

D3.js: максимальна гнучкість

D3 потребує більше коду але справляється з довільними візуалізаціями:

function CustomVisualization({ data }: { data: any[] }) {
  const svgRef = useRef<SVGSVGElement>(null);

  useEffect(() => {
    if (!svgRef.current) return;

    const width = 960, height = 600;
    const svg = d3.select(svgRef.current);

    // D3 binding та рендерінг логіка
    // (типово 100+ рядків для складних графіків)
  }, [data]);

  return <svg ref={svgRef} />;
}

Вибір інструменту

• Chart.js: стовпчасті, лінійні, кругові, радарні графіки в 10 рядків коду
• Recharts: компонент-базований React, type-safe, анімації
• D3.js: складні, інтерактивні візуалізації (карти, force graphs, користувацькі дизайни)

Розклад

Базовий набір графіків з Chart.js: 1 день. Дашборд з кількома графіками з Recharts: 2-3 дні. Користувацькі D3 візуалізації: 3-5 днів на графік.