Chart Components (React)

These demos use the ui-react-dom-charts module to render Store Tables and Queries ResultTables as simple SVG charts.

The set is organized as a small gallery of chart themes:

<LineChart />

In this demo, we render a Store Table with the LineChart component from the ui-react-dom-charts module. Read more.

<LineChart /> (Styled)

In this demo, we apply CSS to a LineChart component to show how all its visual aspects can be styled. Read more.

Composing Charts

This demo shows how CartesianChart component can render multiple child series from the same Table. Each child series owns its own Cell bindings, while the parent chart coordinates the shared axes and layout. Read more.

Sorting And Types

This demo shows how chart components handle common x value shapes: continuous numeric values, ISO date strings, ordered category labels, and boolean categories. In each case, y values must be finite numbers. Read more.

Axis Overrides

This demo shows how XAxis and YAxis component children can override the inferred axis titles, bounds, ticks, tick formatting, and SVG classes in a CartesianChart component. Read more.

Time Axes

This demo shows two ways to use time values on an x axis: ISO date strings that can be detected automatically, and Unix second timestamps that need an explicit XAxis component. Read more.