Claude Code से chart library चुनने की व्यावहारिक गाइड

पहले product risk समझें

Claude Code से chart library चुनने की व्यावहारिक गाइड का मतलब सिर्फ सुंदर screen बनाना नहीं है। असली लक्ष्य है कि interface बेहतर हो, लेकिन conversion, readability, accessibility और mobile layout न टूटे। Production में empty state, loading, error, keyboard focus, long text, ad slot, code block और CTA की position बहुत मायने रखती है।

साथ में claude code dashboard development, claude code data visualization, claude code accessibility भी पढ़ें। Official references: Claude Code docs, Recharts, Chart.js, D3, WCAG 2.2. Claude Code को prompt देते समय goal, boundary, use case, pitfall और verification साफ लिखें।

सुझाया गया prompt

इस सुधार को सबसे छोटे safe change से implement करें।
Existing components, design tokens और routes को respect करें।
use case, pitfall, accessibility, mobile view और failure states जांचें।
Copy-paste-ready code और review checklist दें।

Use case checklist

1. Landing page या article page जहां reader को next step साफ दिखना चाहिए।
2. SaaS dashboard जहां loading, empty data, error और success state समझ आने चाहिए।
3. Checkout, signup और consultation flow जहां main CTA छिपना नहीं चाहिए।
4. Team review जहां Claude Code code के साथ verification points भी देता है।

Implementation code

npm i recharts chart.js react-chartjs-2 d3
npm i -D @types/d3

"use client";

import {
  CartesianGrid,
  Line,
  LineChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";

type Point = {
  date: string;
  revenue: number | null;
  orders: number;
};

const money = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 0,
});

function normalize(points: Point[]) {
  return points
    .filter((point) => Number.isFinite(Date.parse(point.date)))
    .sort((a, b) => Date.parse(a.date) - Date.parse(b.date))
    .map((point) => ({
      ...point,
      label: new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric" }).format(
        new Date(point.date),
      ),
      revenue: point.revenue ?? 0,
      orders: Number.isFinite(point.orders) ? point.orders : 0,
    }));
}

export function RevenueChart({ data }: { data: Point[] }) {
  const rows = normalize(data);

  if (rows.length === 0) {
    return <p role="status">No chart data yet. Check the date range or filters.</p>;
  }

  return (
    <figure aria-labelledby="revenue-chart-title">
      <h2 id="revenue-chart-title">Revenue trend</h2>
      <ResponsiveContainer width="100%" height={320}>
        <LineChart data={rows} margin={{ top: 16, right: 24, bottom: 8, left: 8 }}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="label" />
          <YAxis tickFormatter={(value) => money.format(Number(value))} />
          <Tooltip formatter={(value) => money.format(Number(value))} />
          <Line type="monotone" dataKey="revenue" stroke="#2563eb" strokeWidth={3} dot={false} />
        </LineChart>
      </ResponsiveContainer>
      <figcaption>Data is sorted by date and null revenue is rendered as zero.</figcaption>
    </figure>
  );
}

Pitfall checklist

• केवल screenshot के लिए optimize करने से real user flow खराब हो सकता है।
• केवल color या motion से meaning देने पर accessibility कम होती है।
• 375px mobile width न जांचने से horizontal scroll आ सकता है।
• Empty data, long labels, slow network और reload को ignore करने से production bug आता है।
• Unrelated files बदलने से review कठिन हो जाता है।

Verification

Implementation के बाद Claude Code से अलग review pass मांगें। बदली हुई files, risks, browser checks और manual checks अलग-अलग लिखवाएं। फिर mobile width पर overflow, code block scroll, CTA visibility और focus style देखें।

Monetization angle

यह काम ads, product cards, consultation links, pricing tables और lead forms से जुड़ता है। Real repository में लागू करना हो तो Claude Code training और consultation से repeatable workflow बनाया जा सकता है।

Practical test note

मैंने इसे implementation, review और mobile check में बांटकर test किया। बड़ा redesign prompt देने की तुलना में diff छोटा रहा और layout/accessibility issues deployment से पहले दिख गए।

Extra review notes

• Before/after screenshots compare करें और CTA, ads, text, forms और code blocks देखें।
• Claude Code से पूछें कि क्या हटाया जा सकता है, कौन से names project से match नहीं करते, और कौन सी assumptions risky हैं।
• Deploy से पहले mobile, desktop, keyboard, slow network, empty data और reload behavior test करें।

Extra review notes

• Before/after screenshots compare करें और CTA, ads, text, forms और code blocks देखें।
• Claude Code से पूछें कि क्या हटाया जा सकता है, कौन से names project से match नहीं करते, और कौन सी assumptions risky हैं।
• Deploy से पहले mobile, desktop, keyboard, slow network, empty data और reload behavior test करें।