beizhedenglong / rough-charts

📈 A responsive, composable react charting library with a hand-drawn style.

Rough Charts ·

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

# NPM
npm install rough-charts

# Yarn 
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.

rough-charts's Issues

Feature Request: Prop to change floor of either axis

If I have data to plot to a line graph with a narrow range, i.e. temperature data, I can not find a way to change the lowest value on the Y Axis from 0. So, in my case I end up with a flat line of values at the top of the graph.

In the source useChartContext code I see references to the props userXScale/userYScale, but it appears to take 0 as the bottom range regardless of what is supplied:

if (userYScale) {
       userYScale.range([0, contentHeight])

If this feature exists, it should be documented.

All of the storybook pages and examples you show in the repo show 0 as the bottom bound of the Y Axis.

If this feature does not exist, please allow a way pass a preferred yAxis start value into the ChartContext. With a static set of data, the user could trivially determine a suitable bottom value, and pass it in.

Perhaps, fitting the animated style of the project, a squiggly "break" could be used to show the graph's distortion from 0.

Feature Request: restict area to ArcSeries

Hi there,
I have another feature request: right now, I get a LOT of whitespace (I guess space for Axis) when only plotting an ArcSeries.

Is there a simple way to restrict this area?

Hosted API

Hey @beizhedenglong 👋 Thanks for creating such a beautiful charting library.

I'm looking to convert open source libs into SaaS APIs as part of my work with saasify.sh and thought rough-charts would be a great fit.

For example, I'd like to create an API endpoint to render charts like

https://api.saasify.sh/1/call/dev/rough-charts@latest/render

called with a JSON payload that represents your React usage in a react-from-json format

{
  "data": [
    { "name": "A", "value": 30 },
    { "name": "B", "value": 90 }
  ],
  "height": 400,
  "children": [
    { "type": "XAxis", "dataKey": "name" },
    { "type": "YAxis" },
    { "type": "LineSeries", "dataKey": "value"}
  ]
}

We'd love to offer a rate-limited API and reserve most of the profits for you. As an example, we've also worked on converting sindresorhus' imagemin and minimaxir's stylecloud to APIs.

Looking forward to hearing your thoughts! Would also be happy to jump on a quick call to discuss.

Feature Request: Real graph like YAxis, vertical on x=0

Really like this charting library. I would like to have XAxis to behave like the Y axis. ranging from a minus X to a plus X and have ticks equally apart etc. Maybe it is already possible, just don't know how to do that.

Feature request: line area chart

Love the project!! 😍
Is there an existing way to make a Area chart such as this one?
http://recharts.org/en-US/examples/SimpleAreaChart

useful value in Tooltips

Currently, the tooltip always shows the value, but not much additional information. Would it be possible to specify a key that might contain a name to be displayed?

Feature Request: Horizontal Bar

Hi,

I see that we already have bar chart here, but I can find the simple way to create a horizontal bar for this example.

Can I create a bar chart like this one with minimum configuration?

Use Svg Viewbox instead of html width and heigt

using <svg viewBox={0 0 ${width} ${height}}> instead of will result in a more flexible svg. It will give more css styling possiblities then using a hard width and height.