`BarChart`

The BarChart component renders a bar chart from TinyBase data. Its x values are rendered categorically by default, even when they are finite numbers. Add an XAxis component with a linear or time scale to position bars continuously. Boolean category labels are rendered as true and false.

BarChart(props: (
  (TableSourceProps | QuerySourceProps) & BindingProps &
  ChartProps &
  {children?: ReactNode}
)): ComponentReturnType

	Type	Description
`props`	`( (TableSourceProps \| QuerySourceProps) & BindingProps & ChartProps & {children?: ReactNode} )`
returns	`ComponentReturnType`

See the Sorting And Types (React) demo for this component in action:

BarChart component example

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