react-gifted-charts

ReactJS counterpart of react-native-gifted-charts

Installation

npm i react-gifted-charts @react-spring/web

Note: If you are facing issues related to react-refresh, add below code to your package.json-

  "overrides": {
    "react-refresh": "0.11.0"
  },

Docs

Documentation and gallery

Usage

The simplest usage of various types of charts can be done as below-

import { BarChart, LineChart, PieChart, PopulationPyramid } from "react-gifted-charts";

// ...
const data=[ {value:50}, {value:80}, {value:90}, {value:70} ]

<BarChart data = {data} />
<LineChart data = {data} />
<PieChart data = {data} />
<PopulationPyramid data = {[{left:10,right:12}, {left:9,right:8}]} />

// For Horizontal Bar chart, just add the prop horizontal to the <BarChart/> component

<BarChart data = {data} horizontal />

// For Area chart, just add the prop areaChart to the <LineChart/> component

<LineChart data = {data} areaChart />

// For Donut chart, just add the prop donut to the <PieChart/> component

<PieChart data = {data} donut />

Tests

Screenshot tests are written in the react-gifted-charts-test repo.
See the test reports here