This is a thin React wrapper around the awesome roughViz.
npm i react-roughviz
<h3>Bar</h3>
<Bar
data='https://raw.githubusercontent.com/jwilber/random_data/master/flavors.csv'
labels='flavor'
values='price'
/>
<h3>Pie</h3>
<Pie
data={{
labels: ['North', 'South', 'East', 'West'],
values: [10, 5, 8, 3]
}}
title='Regions'
colors={['red', 'orange', 'blue', 'skyblue']}
roughness={8}
/>
See it in action here: https://codesandbox.io/s/react-codesandbox-zmn70
Run it via
npm start
This runs an example app (at http://localhost:3000) via react-scripts, you can then edit the example or the packaged code.
Due to how roughViz accesses the browser environment when rendering, React testing is limited: Testing by rendering to document.createElement()
, or snapshot testing, won't work.
Integration testing via e.g. jest-puppeteer is possible, though. See ./integration/smoketest.test.js, or run it yourself:
npm run test:integration