`LineChart`

The LineChart component renders a line chart from TinyBase data.

LineChart(props: (
  ChartTableSourceProps | ChartQuerySourceProps &
  ChartBindingProps &
  ChartProps
)): ComponentReturnType

	Type	Description
`props`	`( ChartTableSourceProps \| ChartQuerySourceProps & ChartBindingProps & ChartProps )`
returns	`ComponentReturnType`

Example

This example creates a Provider context into which a default Store is provided. The LineChart component then renders an SVG chart from Cells in the pets Table.

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

const App = ({store}) => (
  <Provider store={store}>
    <LineChart
      tableId="pets"
      xCellId="order"
      yCellId="sold"
      className="sales"
    />
  </Provider>
);

const store = createStore().setTable('pets', {
  hamsters: {order: 1, sold: 12},
  rabbits: {order: 2, sold: 9},
});
const app = document.createElement('div');
createRoot(app).render(<App store={store} />);
console.log(app.firstChild?.nodeName.toLowerCase());
// -> 'svg'
console.log(app.firstChild?.getAttribute('class'));
// -> 'sales'

Since

v8.5.0