Chart

src/charts/Chart.tsx

Import

import { Chart } from "@ossrandom/design-system/charts";

Peer dependencies

uplot (canvas, default)
@deck.gl/core + @deck.gl/layers (webgl/webgpu)

Example

Time-series line chart

<Chart
  timestamps={[Date.now() - 60_000, Date.now() - 30_000, Date.now()]}
  series={[{ id: "cpu", label: "CPU %", data: [35, 62, 78] }]}
  height={240}
/>

API

extends BaseProps

Prop	Type
`type`	`ChartType`
`timestamps` required	`readonly number[]`
`series` required	`readonly ChartSeries[]`
`height`	`number`
`showGrid`	`boolean`
`showLegend`	`boolean`
`xLabel`	`string`
`yLabel`	`string`
`engine`	`RenderEngine`
`onPointClick`	`(point: ChartPoint, seriesIndex: number) => void;`

Related types

interface

ChartSeries

Prop	Type
`label` required	`string`
`data` required	`readonly number[]`
`color`	`string`

interface

ChartPoint

Prop	Type
`x` required	`number`
`y` required	`number`