Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
doc
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Build Status JavaScript Style Guide

react-svg-graphs

React SVG graphs is a library I wrote to render high-quality SVG graphs of scalar data. It is useful for things like metrics, but not statistics. Focus here is on specific use cases (e.g. temporal data), not to support a wide range of graphing requirements.

Status

This is being used in production since 1.6.x so you can consider it stable.

Installation

$ npm i react-svg-graphs

Requirements

You need to import Roboto Mono into your stylesheets somewhere, e.g.

<link href="https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap" rel="stylesheet">

Features

4 types of graph are supported:

  1. Scalar data on a scalar X-axis.
  2. Scalar data over time.
  3. Aggregated scalar data over time (e.g. a graph showing HTTP 200 responses over time, a la Heroku metrics).
  4. Sparklines.

Limitations

  • If you want to display more than 10 sets of data you have to supply your own color palette.
  • No custom styling or configurations.

Testing

Running

$ npm run test:functional

will start a dev server and show the SVG outputs of different tests.

Usage:

The code in functional tests (see above) will show how to structure your data to generate graphs. The top-level components are:

<ScalarXScalarYGraph />
<TimeXScalarYGraph />
<TimeXAggregateYGraph />
<Sparkline />

For example:

import React from 'react'
import { render } from 'react-dom'

import { ScalarXScalarYGraph } from 'react-svg-graphs'

const data1 = [
  {
    label: 'A',
    values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(a => ({ x: a, y: a * a }))
  },
  {
    label: 'B',
    values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(b => ({ x: b, y: b * 10 }))
  }
]

render(
  <ScalarXScalarYGraph
    data={data1}
    width={width}
    height={height}
    title='Basic Example'
    xLabel='Iterations'
    onHover={hoverInfo => console.log('hover info:', hoverInfo)}
  />,
  document.getElementById('contents')
)

Result:

Basic Example

You can’t perform that action at this time.