react-charts-line

Pure SVG, dependency-free React charts!

demo

To use:

npm install react-charts-line

then

React = require 'react'
ReactLineChart = require 'react-charts-line'
 
{div} = React.DOM
 
Chart = React.createClass
  getInitialState: ->
    points: []
 
  componentWillMount: ->
    request.get(yourData)
           .end (res) =>
      @setState rows: res.body.points
 
  render: ->
    data = ({
      x: p.base
      y: p.value
    } for p in @state.points)
 
    (div {},
      (ReactLineChart
        data: data
        width: 960
        height: 500
        series:
          x:
            scale: 'linear'
          y:
            scale: 'linear'
            legend: 'Values of Y for each X'
      )
    )

data

Should be an array of all of your data points with a x property and a y property, like

data = [{
  x: 12, y: 44.5
}, {
  x: 13, y: 47
}, {
  x: 14, y: 43
}]

See it in action:

trafego.alhur.es papeis.alhur.es microanalytics.alhur.es