Creating Sparkline Graphs With React
Making a simple interactive line chart
I’m currently working on a project where I’m trying to keep track of the price of certain snowboards over time. So I wanted to show a very small line graph that displays the price of the product, over a period of time with no frills.
I was going for the look of the weekly downloads chart on npm, just a lightweight chart and some highlighting. It’s interactive so if you mouseover the graph, you can see a date and a value. In this instance, its drawn with an svg, so I was looking for a similar tool.
A quick google search yields to a bunch of different js charting solutions:
These are fully featured charts/graphs libraries where you have full control over all the dozens of elements of a graph, and can display it in whatever manner you wish. If you want to be able to sift through large amounts of data, these are the tools you’d be looking for.
But for me, all of these seemed like overkill for my project because I don’t have a need for so many features in a graph, and I only need 1 graph! I have no need to pull in real-time information or display in-depth details about the graph. All I need is a graph with a line on it, and maybe a tooltip or two.
While taking a look at the different features of the charting libs, I came across a type of chart called a “Sparkline”. A sparkline is also described as a “naked” line graph. No x/y-axis labels, just the image. Now that sounds like what I needed for my project.
The best option I found was borisyanko/react-sparklines project which has a lot of flexible customization options, but unfortunately, it lacked the one thing that I wanted which was having an interactive sparkline like the npm page.
The second best option was fnando/sparklines which offered interactivity by allowing callbacks as you moved the mouse around the graph. It seemed like the most lightweight solution — it has no dependencies of its own, can be used in any framework, and supports an interactive mode.
Here’s what the code looks like hooked into a React functional component
That snippet above lets me create a graph that shows a little tooltip as you move the mouse around, and looks almost as good as the one you’d find on the npm page.
Check it out in action here in this CodePen.
Thanks for reading!
If you enjoyed this article, check out some of my recent posts:
