Skip to content

v8.5.0

Choose a tag to compare

View all tags
@jamesgpearce jamesgpearce released this 21 Jun 08:53
v8.5.0
f134b12

React Chart Components

This release adds the new ui-react-dom-charts module, providing reactive SVG chart components for React apps.

The LineChart component and BarChart component can render data directly from a Store Table, or from a Queries ResultTable, using the same Provider context patterns as the rest of the React UI modules. For more complex charts, the CartesianChart component can compose multiple LineSeries component children and BarSeries component children in one SVG.

image

A chart can be bound to a Table with just the Table Id and the Cell Ids to use for the x and y values:

import React from 'react';
import {createRoot as createReactRoot} from 'react-dom/client';
import {createStore} from 'tinybase';
import {
  CartesianChart,
  LineChart,
  LineSeries,
} from 'tinybase/ui-react-dom-charts';

const chartStore = createStore();
const app = document.createElement('div');
const root = createReactRoot(app);

chartStore.setTable('sales', {
  jan: {month: 'Jan', order: 1, profit: 4, revenue: 12},
  feb: {month: 'Feb', order: 2, profit: 7, revenue: 18},
  mar: {month: 'Mar', order: 3, profit: 5, revenue: 15},
});

const MyChart = () => (
  <LineChart
    tableId="sales"
    store={chartStore}
    xCellId="month"
    yCellId="revenue"
    sortCellId="order"
  />
);

root.render(<MyChart />);

console.log(app.firstChild?.nodeName.toLowerCase());
// -> 'svg'

To plot multiple series in the same chart, use the CartesianChart component as the shared frame and declare each child series explicitly:

const MyCompositeChart = () => (
  <CartesianChart tableId="sales" store={chartStore}>
    <LineSeries
      className="revenue"
      label="Revenue"
      xCellId="month"
      yCellId="revenue"
      sortCellId="order"
    />
    <LineSeries
      className="profit"
      label="Profit"
      xCellId="month"
      yCellId="profit"
      sortCellId="order"
    />
  </CartesianChart>
);

const compositeChartApp = document.createElement('div');
createReactRoot(compositeChartApp).render(<MyCompositeChart />);
console.log(compositeChartApp.querySelectorAll('.line-series').length);
// -> 2

The same CartesianChart frame can include zero or one XAxis component and YAxis component child. These configuration children let you override inferred axis titles, numeric bounds, explicit ticks, tick counts, tick formatters, and axis-specific class names without adding more top-level chart props.

image

The Axis Overrides demo shows this pattern with numeric timestamps formatted as dates on the x axis, and revenue ticks formatted as dollar amounts on the y axis.

The Time Axes demo focuses on date handling directly, showing ISO date strings that infer a time scale and Unix second timestamps that use scale="time" and timestampUnit="second".

Chart presentation is handled with CSS. The chart components emit stable SVG class names for grid lines, axes, data marks, and tooltips, so you can keep data binding in props and visual styling in stylesheets.

Read more in the Using Charts guide and the Chart Components (React) demos.

The create-tinybase CLI tool also now includes a Charting app option, so you can scaffold a complete editable table with reactive chart output by running npm create tinybase@latest.

There are no intended breaking changes in this release. Please try the new chart components and let us know which chart types or styling hooks would be most useful next.

Assets 2
Loading