npm.io
0.4.26 • Published 1h ago

@axicharts/charts-canvas

Licence
MIT
Version
0.4.26
Deps
2
Size
83 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

AxiCharts

npm version CI License: MIT

MIT React charts for dashboards — composable JSX, optional JSON spec, canvas when panels go live.

Start here

Goal: one themed line chart in a React app — smallest install, no spec layer.

1. Install (line-only)

pnpm add @axicharts/charts @axicharts/charts-theme uplot

Peers: react, react-dom, uplot. No echarts required for line/bar/area — see import guide.

2. Render
import { QuickLineChart } from "@axicharts/charts/quick";

export function LatencySparkline() {
  return (
    <QuickLineChart
      data={[42, 38, 55, 49, 62, 58, 71]}
      labels={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
      title="p95 latency"
    />
  );
}

QuickLineChart wraps ChartContainer + LineChart with cleanTheme and sensible defaults.

3. Theme
import { cleanTheme, createTheme } from "@axicharts/charts-theme";

const brandTheme = createTheme(cleanTheme, {
  name: "acme",
  bar: { radius: 8 },
});

Copy tokens.css from @axicharts/charts-theme for shadcn --chart-* alignment.

4. Layout + grow

ChartContainer needs an explicit height (or minHeight) in flex/grid layouts:

import { ChartContainer, LineChart } from "@axicharts/charts/cartesian";
import { cleanTheme } from "@axicharts/charts-theme";

<ChartContainer theme={cleanTheme} minHeight={280}>
  <LineChart
    categories={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
    series={[{ name: "p95", data: [42, 38, 55, 49, 62, 58, 71] }]}
    fill
  />
</ChartContainer>

Scaffold: npx @axicharts/charts create-dashboard my-app --category cartesian

Choosing your path: docs /guides/choosing-your-path

Advanced

Use these when you outgrow hand-built JSX — agents, codegen, or portable dashboard JSON.

Agent-safe chart families (cartesian · distribution · matrix)

Closed marks[] grammars with validate_panel before render:

import { Chart, createPanel, validatePanel } from "@axicharts/charts-spec";

const { panel } = createPanel({
  family: "distribution",
  intent: "browser share donut",
  fields: ["browser", "share"],
});
const check = validatePanel(panel, { rows: data, strict: true });
if (!check.ok) throw check.errors;

<Chart panel={check.spec ?? panel} data={data} />
Migrating from Recharts / shadcn Charts

Secondary path — not the default front door:

Live ops dashboards

mode="live" + liveTheme for 5–10 Hz panels. Brush sync across charts: Storybook Charts/BrushSync. Compare: docs /compare.

Architecture

Full platform stack — optional until you need embed, planner, or breadth chart types.

Package Role
@axicharts/charts React API — import subpaths (/cartesian, /quick, …) not root when possible
@axicharts/charts-theme cleanTheme, liveTheme, industrialTheme, tokens.css
@axicharts/charts-spec Templates, validateCartesianSpec, eject CLI
@axicharts/charts-runtime Embed SDK, adapters, mosaic layout
@axicharts/charts-planner Server planner — intent → panels (optional)
@axicharts/charts-full Meta-package — everything + spec + runtime

Import cheat sheet: docs /guides/imports · Bundle sizes: docs /benchmarks · Troubleshooting: docs /guides/troubleshooting

Batteries-included install (pie, candlestick, heatmap, spec, runtime):

pnpm add @axicharts/charts-full echarts uplot

Product RFCs and roadmap: axiboard docs

Develop

pnpm install
pnpm build
pnpm test
pnpm storybook
pnpm docs        # → http://localhost:3001
pnpm size        # bundle gzip budgets

Community

License

MIT