@kvickchart/react

The React entry point for KvickChart, an interactive chart engine backed by a worker-owned Rust/WebAssembly renderer.

npm install @kvickchart/react@alpha

import { Chart, defineChart, useKvickChart } from "@kvickchart/react"

type Point = { time: number; value: number }

const definition = defineChart<Point>()({
  axes: [
    { id: "time", dimension: "x", type: "time" },
    { id: "value", dimension: "y" },
  ],
  panes: [{ id: "main", xAxes: ["time"], yAxes: ["value"] }],
  series: [
    {
      id: "value",
      type: "line",
      x: "time",
      y: "value",
      xAxis: "time",
      yAxis: "value",
      pane: "main",
    },
  ],
})

export function Example({ data }: { data: readonly Point[] }) {
  const chart = useKvickChart({ data, definition })

  return (
    <Chart.Root chart={chart} style={{ height: 320, position: "relative" }}>
      <Chart.Surface
        aria-label="Value over time"
        style={{ inset: 0, position: "absolute" }}
      />
      <Chart.Pane id={chart.ids.panes.main} style={{ height: "100%", padding: 40 }}>
        <Chart.Plot style={{ height: "100%" }} />
      </Chart.Pane>
    </Chart.Root>
  )
}

The browser must support WebAssembly, Web Workers, OffscreenCanvas, and WebGL2. Applications should provide an accessible data view or fallback when those capabilities are unavailable.

The project is in alpha. Public APIs may change between prereleases.

See the repository documentation for complete examples, browser requirements, contributing, and security information.