Home

Awesome

d3-react-sparkline npm version js-standard-style

A simple component to render a sparkline with D3 using react-faux-dom.

Example Line

Usage

If you're working on this repository you can use make to set everything up.

# Fetch the dependencies
make bootstrap

# Start the development server
# http://localhost:3000
make start

If you're using this component as an end user you can simply import the component and give it some data.

<Sparkline width={180} height={60} data={[10, 16, 5, 22, 3, 11]} />

You can also specify interpolation as one of D3s own or a custom function. It maps directly to the .interpolate() method within the D3 API.

Style it with something like this (presuming you set a className to visitors):

.visitors .sparkline {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

Want to work on this for your day job?

This project was created by the Engineering team at Qubit. As we use open source libraries, we make our projects public where possible.

We're currently looking to grow our team, so if you're a JavaScript engineer and keen on ES2016 React+Redux applications and Node micro services, why not get in touch? Work with like minded engineers in an environment that has fantastic perks, including an annual ski trip, yoga, a competitive foosball league, and copious amounts of yogurt.

Find more details on our Engineering site. Don’t have an up to date CV? Just link us your GitHub profile! Better yet, send us a pull request that improves this project.