Pursuit of Loot

Xkcd charts

Posted on 12th February 2020

Tags:

A stock image of a hand drawn chart

Look at that lovely hand-drawn chart. It's a thing of beauty. Who wouldn't want a nice hand drawn chart on their React-based website? If the answer to that question is "me" (meaning you, not me) then you should probably put this web page in the bin and move on.

For those chartophiles who stayed (assuming that is the word for what I mean), you may be interested in a module you can install on your website that will let you create your own custom charts drawn in the style of the famous Xkcd internet cartoon.

Technically, you don't even need React to use this library, the implementation details say you can just use an inline script and any old svg element to make your chart. However, because people are helpful, packages like this one exist to allow you to import some components and pass a few data/customisation props to them and voilà, you have a chart!

A screenshot of a chart in my Xkcd experiment

You've got pretty much full creative control when it comes to how your charts look and the data that goes in them, if you need a colour palette other than the default I can recomment visiting Lospec, they have a number of excellent videogame themed colour palettes ready to have their hex codes copy and pasted.

Finally, if like me your final SVG element ends up being too wide for your container, you can implement a solution like this one to help wrangle them. I'm using scss modules to style my components, so all I added was new wrapper class and added that to a div around my Xkcd component. Lovely stuff.

Head over to my experiments page to see just three of the varying types of chart this library offers. Now I'm waiting for someone to create a full dashboard suite in this style so I can try to implement it at work!

🙏 Special Thanks

Kudos for the photo by Isaac Smith on Unsplash, keep up the great work!


Enjoyed this post? Feel free to share it with your audience using the links below:

Don't see your favourite social network on the list? Feel free to let me know and I'll get it added.

Comments

©2022 Pursuit of Loot. All rights reserved.