Junhan2/ztd-charts

Project overview

ztd charts is a React chart library that renders 36 chart types in pure SVG with no runtime dependencies beyond React as a peer dependency. It is aimed at developers building reports and dashboards who want charts that highlight a single takeaway, animate on scroll and data changes, and remain accessible: keyboard navigation, screen reader descriptions, data tables, reduced-motion support and WCAG AA label contrast are built in. Charts can be used directly as React components or described as JSON specs with a public JSON Schema, which is the format the CLI, MCP server and AI agent tooling operate on. The library ships English and Korean locales.

Quick start

Install the package, then render a chart inside a ChartCard with a title, legend and takeaway text:

npm i ztd-charts

import { ChartCard, PieChart } from "ztd-charts";

const sales = [
  { device: "Mobile", share: 72 },
  { device: "Desktop", share: 23 },
  { device: "Tablet", share: 5 },
];

export function SalesByDevice() {
  return (
    <ChartCard
      title="Sales by device"
      subtitle="Share of revenue (%)"
      legend={[
        { label: "Mobile", color: "accent" },
        { label: "Desktop", color: "ink" },
        { label: "Tablet", color: "neutral" },
      ]}
      takeaway="Mobile brings in most sales"
    >
      <PieChart data={sales} label="device" value="share" highlight="Mobile" />
    </ChartCard>
  );
}

The same chart can be written as a JSON spec and passed to the generic Chart component, which uses type, data, encoding and options fields. For AI-assisted workflows, add the MCP server to Claude Code and use the CLI to suggest charts from a CSV and render a spec to PNG:

claude mcp add ztd-charts -- npx -y ztd-charts-mcp
npx ztd-charts-cli suggest sales.csv --out-dir charts
npx ztd-charts-cli render donut.json --out donut.png --theme light --scale 2

The MCP server lists charts, returns schemas and examples, validates specs, renders to PNG, SVG and React code, and suggests charts from CSV, rows or a URL. A live gallery and playground are available on the docs site.

Constraints and compatibility

React is the only peer dependency, and very large datasets switch to canvas rendering automatically. The library supports the 36 listed chart types grouped by proportion, hierarchy, flow, comparison, trend, distribution, relationship and KPI. Locale switching beyond en-US requires setting locale="ko-KR" for Korean number formats and chart text. The CLI and MCP server run through npx, so Node.js and network access to the npm registry are required. Package sizes are quoted at roughly 12 to 24 kB Brotli for a chart with the shared core, and the project publishes a QA report covering contrast, frame rate, a 10,000-point stress test and bundle sizes.

HotRepo's take

The repository entered HotRepo's new-project list for TypeScript on 2026-11-09 with 116 stars and 12 forks, gaining 10 stars in the recorded one-hour growth window. No best daily rank is recorded. The README backs the feature claims with a gallery, example dashboards, a QA report and a chart catalog, and the package is split into React, CLI and MCP packages, which gives readers concrete entry points beyond the summary.

Project source and documentation