Introduction

Installation

Install Chartlyx from npm. React 18+ is a peer dependency: it is not bundled with the library, so you must have it in your project already.

npm install chartlyx

Or with your preferred package manager:

pnpm add chartlyx
yarn add chartlyx
bun add chartlyx

The package ships in both ESM and CommonJS formats with full TypeScript declarations, so it works in modern bundlers (Vite, Next.js, Astro) and older Node tooling alike.

Your first chart

A minimum-viable line chart is three components: a container, an axis pair, and a line. The container measures its parent and provides scales via React context; children read those scales to draw themselves.

import { ChartContainer, Line, XAxis, YAxis } from "chartlyx";

const data = [
  { month: "Jan", revenue: 320 },
  { month: "Feb", revenue: 460 },
  { month: "Mar", revenue: 380 },
  { month: "Apr", revenue: 620 },
];

export function RevenueChart() {
  return (
    <div style={{ height: 320 }}>
      <ChartContainer
        data={data}
        xKey="month"
        xScaleType="band"
        yKey="revenue"
        yScaleType="linear"
      >
        <XAxis />
        <YAxis />
        <Line stroke="#5eead4" strokeWidth={2} />
      </ChartContainer>
    </div>
  );
}

Note the wrapping div with an explicit height. Chartlyx charts fill their parent. They never take a fixed width or height prop. This makes them responsive by default, but the parent needs to give them a size.

TypeScript setup

Chartlyx is written in TypeScript and every component is generic over your data row type. You get autocomplete on xKey, yKey, and render-prop callbacks, without writing a single type annotation of your own.

interface Row {
  month: string;
  revenue: number;
}

<ChartContainer<Row>
  data={data}         // typed as Row[]
  xKey="month"        // autocomplete: "month" | "revenue"
  yKey="revenue"      // narrowed to numeric keys only via KeysOfType
  xScaleType="band"
  yScaleType="linear"
>
  {/* ... */}
</ChartContainer>

The yKey prop uses the internal KeysOfType<T, number> utility, so passing a string-valued key is a compile error, not a runtime bug. See KeysOfType.