I’ve released a minimalist library I use for generating SVG graphs as React components. It in on NPM and Github.

D3 graphs are great, but I struggle with the complexity of the API. Yes I know this is NIH syndrome, but sometimes you want things to look pixel perfect and creating your own is actually less effort.

There aren’t a lot of options, neither are there likely to be. The point is to have something that looks great and is easy to use. If you need lots of options and configurability, this is not for you.

Please consult the README for the latest docs.

Usage:

<ScalarXYGraph
  data={data}
  width={width}
  height={height}
  padding={padding}
  title={title}
/>

Basic example:

const data = {
  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 ]
  }]
}

result:

Basic

Advanced example:

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

result:

Advanced

Conclusion

This is a first, basic release. YMMV. If you want more features, please submit a pull request or log an issue on Github, although as I said this is a minimalist library and it will not become feature-rich.