Charts, Colors, and Complements: Oh my!
Tags: programming, chartjs
Published: 2018-12-23 16:45:37

---
title: Charts, Colors, and Complements: Oh my!
published: true
tags: Programming,chartjs,
canonical_url: https://www.stephencharlesweiss.com/blog/2018-12-20/charts-colors-and-complements-oh-my/
---

> Charts are the black hole of programming.

I was warned, but I wanted to tackle charts anyway. That was my first mistake.

Humans tend to understand graphical information better than text on average. But presenting information visually in a _compelling_ way is not only _not_ easy. It’s **hard**.

If I wasn’t convinced, my recent experience left me with little doubt.

The process of adding simple charts took me down a number of rabbit holes to explore… and get lost in.

<img src="https://media.giphy.com/media/4BgQaxfQfeqys/giphy.gif" alt="alice down the rabbit hole">

This post is intended to document three major takeaways from the process:

1. Charts are hard; budget your time accordingly
2. Purely random colors can be jarring; complementary colors can be derived using the Golden Ratio
3. The math behind converting colors to / from RGB, HSV, HSL, and Hexidecimal representations is both fascinating, and something that should not need to be redefined every time.

# Drawing Charts

To draw my charts in my app, I used [chart.js](https://www.chartjs.org/). I’m building a React app, and there _is_ [react-chartjs-2](https://www.npmjs.com/package/react-chartjs-2), a `chart.js` package for React.

However, I ran into some strange errors trying to incorporate it into the project, so I went with the MVP approach and used the basic package.

I plan to refactor in the future to use the React version as it seems to have better support for components, but in the mean time, I got it working.

[![](https://i1.wp.com/www.stephencharlesweiss.com/wp-content/uploads/2018/12/doughnut-chart.png?resize=300%2C171&ssl=1)](https://i1.wp.com/www.stephencharlesweiss.com/wp-content/uploads/2018/12/doughnut-chart.png?ssl=1)<figcaption>One of the charts I eventually was able to render.</figcaption>

I used the [patternomaly](https://github.com/ashiguruma/patternomaly) package which helps to address accessibility concerns by including patterns on charts.

# Randomizing Colors

At this point, I don’t have a designer helping me with the app. Nor do I have a style guide that can support dozens of colors.

With that being the case, I should have just done the easiest thing possible to randomize colors for my chart. That would have looked something like:

{% gist https://gist.github.com/stephencweiss/833b16bb2f25792a89da89a78ebc7385 %}

This would have _totally_ worked. The problem was that I wanted something slightly more … elegant. Thus, began my descent into rabbit hole number one: color theory.

I read close a dozen articles about color theory before finding Martin Ankerl’s post [How to Create Random Colors Programmatically](https://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/). In it, Martin outlines _why_ purely random colors aren’t ideal and how to achieve complements with the Golden Ratio. Here’s one of his snippets

{% gist https://gist.github.com/stephencweiss/b81534a759c7e6cc7b6feed83df38874 %}

Okay, now we’re getting places! The problem was that function `hsv_to_rgb()`. How did it work?

Queue rabbit hole number two.

## HSV, HSL, and RGB

When it comes to computers, colors are just numbers. But which numbers we use and how they relate was a source of hours of learning this week. Starting with the the wikipedia page on [HSL and HSV](https://en.wikipedia.org/wiki/HSL_and_HSV) and branching out from there.

Now that I had a bit of background on how the different color systems related, I needed to be able to go from one to the next.

Two resources were intensely valuable on this front:

1. The [Converting To RGB](https://en.wikipedia.org/wiki/HSL_and_HSV#Converting_to_RGB) section on the Wikipedia page
2. [RapidTables](https://www.rapidtables.com/) is a site that will convert these numbers for you one at a time. They also include the derivations on their page for the interested parties (like me!).

With those references, I was able to write my own `hsv_to_rgb` (as well as several others – see my full list at the end of the post) — and understand _why_ it worked the way it did. At least for the most part!

## Putting Complements Into practice

Now that I had a my own color conversion functions, I could write a function that took an input of the number of color/pattern combinations I needed returned and would generate complements.

{% gist https://gist.github.com/stephencweiss/5ca6045255474083e6f2bc4ba42eb4dc %}

# Color Conversions

Going back and forth between different color types is something that comes up with some regularity. While there are libraries out there that will handle these calculations for you, I wanted to understand how they worked.

So, I wrote out functions for several common conversions. Here’s a gist with some of the common conversions I found particularly useful.
{% gist https://gist.github.com/stephencweiss/eab510dabb2ba50652434372e46b5980 %}