Skip to content
📈 A responsive, composable react charting library with a hand-drawn style.
TypeScript JavaScript HTML
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows
.vscode
img
packages Publish Mar 5, 2020
typings.d.ts docs(storybooks): add style doc Oct 21, 2019
.eslintrc
.gitignore
LICENSE
README.md
lerna.json initial commit Oct 4, 2019
package.json build: add npm scripts Oct 24, 2019
yarn.lock fix: jsx pragma Mar 5, 2020

README.md

Rough Charts · license build status

A responsive, composable react charting library with a hand-drawn style. See Examples From StoryBooks.

Overview

Features

  • It's responsive.
  • It's flexible and easy to compose. You can compose all available ChartSeries Components and render any shapes you like.
  • It's lovely.
  • It's written in TypeScript.

Installation

  yarn add rough-charts

This project contains a package called react-roughjs. It has a lot of basic rough shapes, you may need it.

Usage

import * as React from 'react'
import {
  LineSeries, Tooltip,
  ChartProvider, XAxis, YAxis,
} from 'rough-charts'
import { colors } from './colors'

const data = [
  { name: 'A', value1: 30, value2: 35 },
  { name: 'B', value1: 90, value2: 17 },
  { name: 'C', value1: 50, value2: 23 },
  { name: 'D', value1: 40, value2: 15 },
  { name: 'E', value1: 70, value2: 39 },
  { name: 'G', value1: 30, value2: 25 },
  { name: 'H', value1: 100, value2: 31 },
  { name: 'I', value1: 110, value2: 32 },
]

const App = props => (
  <ChartProvider
    height={400}
    data={data}
  >
    <XAxis dataKey="name" />
    <YAxis />
    <LineSeries
      dataKey="value1"
      options={{
        stroke: colors[0],
        strokeWidth: 2,
      }}
    />
    <LineSeries
      dataKey="value2"
      options={{
        stroke: colors[3],
        strokeWidth: 2,
      }}
    />
    <Tooltip />
  </ChartProvider>
)

Fonts

Add your favorite hand-drawn style fonts:

<link href="https://fonts.googleapis.com/css?family=Patrick+Hand&display=swap" rel="stylesheet">
<style>
  * {
    font-family: 'Patrick Hand', cursive;
    font-size: 16px;
  }
</style>

Credits

This project was built on top of d3 and roughjs.

You can’t perform that action at this time.