BarChart

Example

This example creates a Queries object and provides it through Provider context. The BarChart component then renders an SVG chart from Cells in the bySpecies query.

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

const App = ({queries}) => (
  <Provider queries={queries}>
    <BarChart queryId="bySpecies" xCellId="species" yCellId="sold" />
  </Provider>
);

const store = createStore().setTable('pets', {
  hamsters: {species: 'hamster', sold: 12},
  rabbits: {species: 'rabbit', sold: 9},
});
const queries = createQueries(store).setQueryDefinition(
  'bySpecies',
  'pets',
  ({select}) => {
    select('species');
    select('sold');
  },
);
const app = document.createElement('div');
createRoot(app).render(<App queries={queries} />);
console.log(app.firstChild?.nodeName.toLowerCase());
// -> 'svg'

Since

v8.5.0