Charts

Chart Frame

A responsive, accessible host for typed TanStack Charts definitions.

idle

Usage

import { ChartFrame } from "@mizen-labs/ui";

Guidance	Practice
Do	Name the chart's question and provide readable units. Keep detailed values available beyond pointer hover.

Guidance	Boundary
Scope	The chart definition owns the plot. Aggregation, filtering, and a readable data alternative belong to the application.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`ChartFrame`	`ChartFrameProps<TDatum, TXValue, TYValue>`	`Responsive width`	Hosts a typed TanStack Charts definition and preserves datum inference for callbacks.
`aria-label`	`string`	`Required`	Names the chart surface for assistive technology.
`height / aspectRatio`	`number`	`320px height`	Choose fixed height or a positive width-to-height ratio.
`initialWidth`	`number`	`640`	Sets deterministic server and first-frame width before responsive measurement.
`onFocusChange / onSelect`	`Inferred chart callbacks`	`Optional`	Receive typed points from chart-owned keyboard and pointer interactions.
`renderTooltipBody`	`ChartTooltipBodyRenderContext<TDatum, TXValue, TYValue>`	`Engine tooltip`	Provides caller-authored content inside the chart engine's tooltip surface.

Charts

A responsive, accessible host for typed TanStack Charts definitions.

idle

import { ChartFrame } from "@mizen-labs/ui";

Guidance	Practice
Do	Name the chart's question and provide readable units. Keep detailed values available beyond pointer hover.

Guidance	Boundary
Scope	The chart definition owns the plot. Aggregation, filtering, and a readable data alternative belong to the application.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`ChartFrame`	`ChartFrameProps<TDatum, TXValue, TYValue>`	`Responsive width`	Hosts a typed TanStack Charts definition and preserves datum inference for callbacks.
`aria-label`	`string`	`Required`	Names the chart surface for assistive technology.
`height / aspectRatio`	`number`	`320px height`	Choose fixed height or a positive width-to-height ratio.
`initialWidth`	`number`	`640`	Sets deterministic server and first-frame width before responsive measurement.
`onFocusChange / onSelect`	`Inferred chart callbacks`	`Optional`	Receive typed points from chart-owned keyboard and pointer interactions.
`renderTooltipBody`	`ChartTooltipBodyRenderContext<TDatum, TXValue, TYValue>`	`Engine tooltip`	Provides caller-authored content inside the chart engine's tooltip surface.