Getting started | kamod chartsSkip to content
GitHub

Docs

Getting started

Install @kamod-ch/charts and render your first Preact-native chart.

Installation

Install the package with your workspace package manager:

pnpm add @kamod-ch/charts preact

Import theme tokens once in your app entry:

import "@kamod-ch/charts/theme.css";

preact is a peer dependency. React, react-dom, and preact/compat are not supported.

Quick start

High-level charts accept typed row data plus a series configuration:

Monthly revenueGetting started demo for LineChart.JanFebMarAprMayJun30k35k40k45k
tsx
import { LineChart } from "@kamod-ch/charts/line";
import "@kamod-ch/charts/theme.css";

const data = [
{ month: "Jan", revenue: 28400 },
{ month: "Feb", revenue: 31200 },
{ month: "Mar", revenue: 36800 },
];

export function RevenueChart() {
return (
  <LineChart
    data={data}
    xKey="month"
    xScale="point"
    series={[{ key: "revenue", label: "Revenue", color: "var(--chart-1)" }]}
    height={240}
    initialWidth={640}
    responsive
    showGrid
    tooltip
    title="Monthly revenue"
  />
);
}

Next steps