Immersive & Interactive Charts For React

Description:

This is a simple, responsive, immersive & interactive chart library for React app.

Features:

  • Hyper Responsive
  • Declarative & Deterministic
  • Highly performant
  • Built-in Animation (using React-Move)
  • Flexible data model support
  • Simple & powerful API

Chart types included:

  • Line chart
  • Area chart
  • Bar chart
  • column chart
  • Donut chart
  • Pie chart
  • Bubble
  • More…

Installation:

# Yarn
$ yarn add react-charts
# NPM
$ npm install react-charts --save

Basic usage:

Import necessary resources.

import React from 'react'
import { Chart, Axis, Series, Tooltip, Cursor, Line } from 'react-charts'

The sample JS to create a basic line chart.

const lineChart = (
  <Chart data={...}>
    <Axis
      primary
      type="time"
      position="bottom"
    />
    <Axis
      type="linear"
      position="left"
    />
    <Series type={Line} />
    <Tooltip />
    <Cursor primary />
    <Cursor />
  </Chart>
)

Preview:

react-charts

Add Comment