`LineChart`

The LineChart component renders a line chart from TinyBase data. If every x value is a finite number, the x axis is rendered as a continuous linear scale. ISO date strings are inferred as a time scale. Other strings and booleans are rendered categorically. Add XAxis component and YAxis component children to override axis configuration. When sortCellId is omitted, rows are sorted by xCellId.

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

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

See the <LineChart /> (React) demo for this component in action:

LineChart component example

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