Datenvisualisierung mit Claude Code implementieren

Charts effizient mit Claude Code erstellen

Datenvisualisierung ist für Webanwendungen unverzichtbar, aber die API-Spezifikationen von Chart.js oder D3.js auswendig zu kennen, ist eine Herausforderung. Mit Claude Code beschreiben Sie einfach, welches Diagramm Sie möchten, und erhalten sofort funktionierenden Code.

Dashboard mit Chart.js erstellen

Sie können ein Verkaufs-Dashboard mit Chart.js mit folgendem Prompt generieren.

> Erstelle eine monatliche Verkaufs-Dashboard-Komponente in React mit Chart.js.
> Mit Umschaltung zwischen Balken- und Liniendiagramm.

Beispiel für generierten Code:

import { useState } from "react";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  LineElement,
  PointElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";
import { Bar, Line } from "react-chartjs-2";

ChartJS.register(
  CategoryScale, LinearScale, BarElement,
  LineElement, PointElement, Title, Tooltip, Legend
);

const salesData = {
  labels: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun"],
  datasets: [
    {
      label: "Umsatz (€k)",
      data: [120, 190, 150, 210, 180, 250],
      backgroundColor: "rgba(99, 102, 241, 0.5)",
      borderColor: "rgb(99, 102, 241)",
      borderWidth: 2,
    },
  ],
};

const options = {
  responsive: true,
  plugins: {
    legend: { position: "top" as const },
    title: { display: true, text: "Monatlicher Umsatzbericht" },
  },
};

export function SalesDashboard() {
  const [chartType, setChartType] = useState<"bar" | "line">("bar");

  return (
    <div className="p-4">
      <div className="mb-4 flex gap-2">
        <button
          onClick={() => setChartType("bar")}
          className={chartType === "bar" ? "btn-active" : "btn"}
        >
          Balkendiagramm
        </button>
        <button
          onClick={() => setChartType("line")}
          className={chartType === "line" ? "btn-active" : "btn"}
        >
          Liniendiagramm
        </button>
      </div>
      {chartType === "bar" ? (
        <Bar data={salesData} options={options} />
      ) : (
        <Line data={salesData} options={options} />
      )}
    </div>
  );
}

Echtzeit-Datenvisualisierung

Auch Echtzeit-Chart-Aktualisierungen mit API-Daten sind einfach zu implementieren.

import { useEffect, useRef } from "react";
import { Chart } from "chart.js/auto";

export function RealtimeChart({ endpoint }: { endpoint: string }) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const chartRef = useRef<Chart | null>(null);

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

    chartRef.current = new Chart(canvasRef.current, {
      type: "line",
      data: {
        labels: [],
        datasets: [{
          label: "Echtzeitdaten",
          data: [],
          borderColor: "rgb(34, 197, 94)",
          tension: 0.3,
        }],
      },
      options: {
        animation: { duration: 300 },
        scales: { x: { display: true }, y: { beginAtZero: true } },
      },
    });

    const interval = setInterval(async () => {
      const res = await fetch(endpoint);
      const { value, timestamp } = await res.json();
      const chart = chartRef.current;
      if (!chart) return;

      chart.data.labels!.push(timestamp);
      chart.data.datasets[0].data.push(value);

      // Nur die letzten 20 Einträge anzeigen
      if (chart.data.labels!.length > 20) {
        chart.data.labels!.shift();
        chart.data.datasets[0].data.shift();
      }
      chart.update();
    }, 2000);

    return () => {
      clearInterval(interval);
      chartRef.current?.destroy();
    };
  }, [endpoint]);

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

Automatische Chart-Generierung aus CSV-Daten

Wenn Sie Claude Code bitten, “erstelle eine Funktion, die ein Diagramm aus einer hochgeladenen CSV-Datei anzeigt”, implementiert es alles vom Dateilesen über das Parsen bis zur Anzeige.

function csvToChartData(csv: string) {
  const lines = csv.trim().split("\n");
  const headers = lines[0].split(",");
  const labels = lines.slice(1).map((line) => line.split(",")[0]);

  const datasets = headers.slice(1).map((header, i) => ({
    label: header,
    data: lines.slice(1).map((line) => parseFloat(line.split(",")[i + 1])),
    borderColor: `hsl(${i * 60}, 70%, 50%)`,
    backgroundColor: `hsla(${i * 60}, 70%, 50%, 0.2)`,
  }));

  return { labels, datasets };
}

Zum effektiven Prompt-Schreiben siehe 5 Tipps für bessere Prompts. Für Produktivitätstechniken mit Claude Code siehe 10 Tipps für 3-fache Produktivität.

Zusammenfassung

Claude Code beschleunigt die Implementierung von Datenvisualisierungen drastisch. Von der Chart.js-Konfiguration über Datentransformationslogik bis hin zu interaktiven Features erhalten Sie funktionierenden Code, indem Sie einfach Ihre Anforderungen beschreiben.

Weitere Details finden Sie in der offiziellen Claude Code-Dokumentation.