Play with colors to improve chart readability

When dealing with complicated and large data sets in our charts, the sheer volume of data may make it hard to separate the signal from the noise. There are several ways to make a complex chart easier to digest. One of the most effective methods being the dynamic application of color.

In this tutorial, we will look at ways that color can be added to a line chart in order to make it easier to tell when points of data may be approaching or exceeding some boundary value.

Something to start with

Let’s go through a simple example! The beginning is a simple line chart that shows CPU utilization during some period.

The example above looks rather plain, yet one is able to obtain a general sense of the trends. That said, it is possible to improve readability by manipulating colors.

First, let’s tweak the color of the line series when outside of a set of boundary values. This is called to define zones, and it can be applied to any axis. Using this feature, we can control line color or style in specified ranges of values.

In our example, each zone represents a range in which the processor works. A good assumption is that the CPU should work from 25% to 75% – so it will not be overwhelmed or underutilized.

In this case, the first zone will start at 0% and go to the minimum limit of 25% – this is the area where the processor is underutilized. To add this zone, it is possible to specify range boundaries like below: (below is only an example, you need to add it correctly, notice that you can declare color using different notations (text, hex, rgb/rgba)).

zones: [{
  value: 25,
  color: 'blue'
}, {
  value: 75,
  color: '#7cb5ec'
}, {
  color: 'rgba(250, 0, 0, 0.8)'
}]

Our second zone starts from the previous one (25%), ends on 75%, and has a green color. This is the optimum CPU working load. The third and last zone starts at 75% and goes all the way to 100%.

Gradient change

Now the chart is displaying data in a more user-friendly way. However, the rapid color changes might confuse the end-user. For instance, when the value changes from 75% to 76%, that doesn’t mean a catastrophe, there is no need to mark this value as red. Instead, let’s create a gradient for a smooth color change.

In this case, it is better to specify (in pixels) the beginning of a linear gradient. In the above example, the beginning of a linear gradient is the point [0,0]. When applying the gradient vertically, only the point’s y value will change, and the endpoint on the chart is [0,250]. Why 250? Well, our chart container by default has 400px. A part of that space is occupied by margins, title, etc. So we are left with approximately 250px for the plot, this number is easily found under the property plotHeight. The main idea is to change the line color through the whole height of the chart.)

Final tweaks

Even though the gradient improves the readability of the chart, the audience still might be confused to identify the boundaries between each zone. To reduce this confusion, we will add bands by applying plotBands. Bands are colorful areas between specific values. In our case, the bands represent the CPU levels: the ranges are 0-25, 25-75, and 75-100. The opacity is set to 0.05 in the color option to allow better visibility of the main signal (see demo below):

At this point, the chart is ready to help your audience to get a good idea about the CPU workload status. But as you can see, it is sometimes a challenge to spot if the CPU reached the max value of 100%. To solve that, we add a simple data label to visualize that better(see demo below):

More colors aren’t always better. Some might argue that it is easier to read the chart without the plotBands, and others might say the opposite. At the end of the day, the choice depends on your type of data and audience. Let us know your favorite option to get the best of your charts.