react-charts

Simple, immersive & interactive charts for React

Features

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

Demo

Table of Contents

• Installation
• Quick Example
• Examples

Installation

$ yarn add react-charts

Quick Example

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

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

Contributing

To suggest a feature, create an issue if it does not already exist. If you would like to help develop a suggested feature follow these steps:

• Fork this repo
• $ yarn
• $ yarn run storybook
• Implement your changes to files in the src/ directory
• View changes as you code via our React Storybook localhost:8000
• Make changes to stories in /stories, or create a new one if needed
• Submit PR for review

Scripts

• $ yarn run storybook Runs the storybook server
• $ yarn run test Runs the test suite
• $ yarn run prepublish Builds for NPM distribution
• $ yarn run docs Builds the website/docs from the storybook for github pages