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


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


$ npm i react-svg-graphs


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

<link href="" rel="stylesheet">


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.


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



$ npm run test:functional

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


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 }))

    title='Basic Example'
    onHover={hoverInfo => console.log('hover info:', hoverInfo)}


Basic Example


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