Interactive Charts and Diagrams (Chart.js/D3.js/Recharts) Implementation for Website

Implementing Charts and Diagrams: Chart.js, D3.js, Recharts

Data visualization requires choosing the right tool for the task: Chart.js for standard charts, Recharts for React ecosystem, D3.js for custom visualizations.

Chart.js: Line and Bar Charts

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: Maximum Flexibility

D3 requires more code but handles arbitrary visualizations:

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 and rendering logic
    // (typically 100+ lines for complex charts)
  }, [data]);

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

Choosing the Tool

• Chart.js: Bar, line, pie, radar charts in 10 lines of code
• Recharts: React component-based, type-safe, animations
• D3.js: Complex, interactive visualizations (maps, force graphs, custom designs)

Timeline

Basic chart setup with Chart.js: 1 day. Multi-chart dashboard with Recharts: 2-3 days. Custom D3 visualizations: 3-5 days per chart.