Using Charts

The ui-react-dom-charts module provides SVG chart components for rendering data from a Store Table or from a Queries ResultTable.

These components are intended for browser-based React apps. They use the same Provider context patterns as the ui-react module and the ui-react-dom module, so you can usually bind a chart to data with just a few props.

For example, a small sales Table can be rendered as a line chart:

Rendering A Line Chart

The LineChart component renders a series from Cells in a Table. The x Cell can contain numbers or strings, and the y Cell should contain numbers:

import React from 'react';
import {createRoot} from 'react-dom/client';
import {createQueries, createStore} from 'tinybase';
import {Provider} from 'tinybase/ui-react';
import {BarChart, LineChart} from 'tinybase/ui-react-dom-charts';

const salesStore = createStore().setTable('sales', {
  jan: {month: 'Jan', order: 1, revenue: 12},
  feb: {month: 'Feb', order: 2, revenue: 18},
  mar: {month: 'Mar', order: 3, revenue: 15},
  apr: {month: 'Apr', order: 4, revenue: 24},
  may: {month: 'May', order: 5, revenue: 21},
  jun: {month: 'Jun', order: 6, revenue: 28},
});

const LineChartApp = () => (
  <Provider store={salesStore}>
    <LineChart
      className="chart"
      tableId="sales"
      xCellId="month"
      yCellId="revenue"
      sortCellId="order"
    />
  </Provider>
);

const lineChartApp = document.createElement('div');
createRoot(lineChartApp).render(<LineChartApp />);
console.log(lineChartApp.firstChild?.nodeName.toLowerCase());
// -> 'svg'
console.log(lineChartApp.firstChild?.getAttribute('class'));
// -> 'chart'

The sortCellId prop is often useful when the x values are labels. Here the chart displays the month names on the x axis, but the rows are ordered by the numeric order Cell.

Rendering A Bar Chart From A ResultTable

The BarChart component uses the same data binding props, and can also read from a Queries ResultTable. Provide the Queries object through context, then use queryId instead of tableId:

const salesQueries = createQueries(salesStore).setQueryDefinition(
  'salesByMonth',
  'sales',
  ({select}) => {
    select('month');
    select('order');
    select('revenue');
  },
);

const BarChartApp = () => (
  <Provider queries={salesQueries}>
    <BarChart
      className="chart"
      queryId="salesByMonth"
      xCellId="month"
      yCellId="revenue"
      sortCellId="order"
      limit={3}
    />
  </Provider>
);

const barChartApp = document.createElement('div');
createRoot(barChartApp).render(<BarChartApp />);
console.log(barChartApp.firstChild?.nodeName.toLowerCase());
// -> 'svg'

The offset, limit, and descending props let you chart a sorted subset of rows without creating another Table.

Styling With CSS

Chart components emit a single SVG element. Give the SVG a size with CSS, then style its child elements using regular SVG selectors:

.chart {
  display: block;
  font-size: 12px;
  height: 20rem;
  width: 100%;
}

.chart .grid {
  color: #d8e1eb;
  stroke-dasharray: 4 6;
}

.chart .plot .line {
  stroke: #0284c7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.chart .plot .area {
  fill: #0ea5e9;
  fill-opacity: 0.12;
}

.chart .points {
  fill: white;
  stroke: #0284c7;
  stroke-width: 2;
}

The default chart styles use currentColor, so setting color on the chart is often enough for simple cases. More specific selectors let you tune grid lines, axes, labels, bars, lines, points, filled areas, and tooltips.

CSS Class Reference

Chart components render a single SVG element with the className you provide. Inside it, the following class names are used:

Since some class names are intentionally reused in different parts of the SVG, prefer scoped selectors such as .chart .plot .line or .chart .axes .title.

For complete examples, see the Chart Components (React) demos:

Summary

The ui-react-dom-charts module lets you use Store and Queries data directly in React charts, while CSS controls presentation.

For the Solid equivalents of the React guides, proceed to the Building UIs With Solid guides.