MENU


react charts

React Charts allows you to draw simple, immersive & interactive charts for React. To install it:

Installing react-charts via npm
npm install react-charts

Quick Features

Line Charts

Bar Charts

Column Charts

Bubble Charts

Area Charts

Axis Stacking

Inverted Axes

Hyper Responsive

Invisibly Powered by D3

Declarative

Multiple Axes


import {useMemo} from 'react';import { Chart } from 'react-charts'export default function App(){
  const data = useMemo(() => [
    {label: 'Series 1',
      data: [[0, 1], [1, 2], [2, 4], [3, 2], [4, 7]]},
    {label: 'Series 2',
      data: [[0, 3], [1, 1], [2, 5], [3, 6], [4, 4]]}
  ], []);
  const axes = useMemo(() => [
    { primary: true, type: 'linear', position: 'bottom' },
    { type: 'linear', position: 'left' }
  ], []);
  return (<div style={{width: '400px', height: '300px'}} >
    <Chart data={data} axes={axes} />
  </div>);}