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

React SVG Graphs

Build Status

rsg

React SVG graphs.

Status

This is a first prototype, so take care.

Installation

$ npm i react-svg-graphs

Features

  • Supports scalar X and multiple scalar Y values.

Limitations

  • Y value sets limited to 10.
  • No styling of markers & lines yet.

Usage:

There are 5 parameters:

  • data
  • width
  • height
  • padding
  • title

All except data are self-explanatory. data must be in the form shown in the examples below (single x array, multiple y arrays, each with their own labels).

X and Y axes scales are automatic and not configurable (if you have examples where they look terrible, please submit as an issue).

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

import { ScalarXYGraph } from 'rsg'

const data1 = {
  x: {
    label: 'Foo',
    values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  },
  y: [
    {
      label: 'A',
      values: [ 0, 1, null, 9, 16, 25, 36, 49, 64, 81, 100 ]
    },
    {
      label: 'B',
      values: [ 10, 11, 12, 14, 16, 18, 21, 24, null, null, 37 ]
    }
  ]
}

render(
  <ScalarXYGraph
    data={data1}
    width={600}
    height={400}
    padding={50}
    title={`Basic Example`}
  />,
  document.getElementById('contents')
)

Result:

Basic Example

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

import { ScalarXYGraph } from 'rsg'

const xValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const data2 = {
  x: {
    label: 'Bar',
    values: xValues
  },
  y: [0,1,2,3,4,5,6,7,8,9].map(m => ({
    label: m,
    values: xValues.map(x => m * Math.exp(x / 10))
  }))
}

render(
  <ScalarXYGraph
    data={data2}
    width={600}
    height={400}
    padding={50}
    title={`Colors Example`}
  />,
  document.getElementById('contents')
)

Result:

Colors 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