Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-svg-graphs with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("prop-types/package.json"); // prop-types is a peer dependency. var reactSvgGraphs = require("react-svg-graphs")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-svg-graphs v1.7.0

React SVG Graphs

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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free