4

I have to draw a diagram for dynamic data. Each category should have a different color, but I don't know how many categories the diagram is going to show.

I expect this number typically to be between 5 and 10, but more or less is possible. Is there a strategy for choosing the diagram colors in this case, so that

  • they are distinguishable,
  • they do not hurt the eye,
  • they do not create affiliations where there are none?

I thought of the following:

  • Choose one color and use tints/shades

    PRO: fits in well with the rest of the website

    CON: hard to distinguish

  • Choose a few colors and use tints/shades

    PRO: fits in well with the rest of the website, probably enough colors to be distinguishable for the expected amount of categories

    CON: the different colors impose an unwanted meaning, e.g. greenish categories somehow belong together and are different from blueish categories

  • Choose a few colors and use additional patterns

    PRO: like the above

    CON: like the above, with meaning not only in colors but also in patterns

  • Choose a few colors and repeat

    PRO: fits in well with the rest of the website

    CON: one color stands for multiple categories

  • Try to find different colors for all categories (speaking of hues)

    PRO: distinguishable for the expected amount of categories

    CON: off-putting, not easy to calculate

There must be an approach to this problem? I've been searching and thinking for days, but couldn't find a satisfying solution.

You can think of the diagram as a (stacked) bar chart. Other types are possible, although I think this would not essentially change the question (or answers). Of course, the diagram will also be equipped with a legend and tooltips.

1

I did a very similar thing in a project of mine. In it, I used this color library to generate some colors for me. If you view the demo, you'll see the colors being used. It essentially does your second method, "Choose a few colors and use tints/shades".

To reduce the number of similar colors that are hard to distinguish, you can use an algorithm to see how close together they are and generate a new color for ones below a certain threshold (make sure that the threshold is actually achievable given the number of colors you need). You can find a very simple one (checking a linear difference, which isn't how we perceive color change1,2, but is really easy to implement) in my color picker project.

You can also generate sub-sets of colors for related categories. Since you provide no information about said categories, it's hard to give advice as to how to do so.


But from a design perspective, I may not do it this way. It depends on the types of data that you have. If you have a set number of category always, I'd likely choose some set color palette and link each color to a category one-to-one. More details could be helpful in determining whether or not this is preferable.

  • The categories are not related and cannot be grouped further. And the number of categories can in theory range from 0 to infinity :/ But your project sounds very useful, I'm going to take a closer look at it, thank you very much! – User42 Oct 24 '16 at 13:36
  • After thinking about it for a while, I came to the conclusion that it's not perfect that the colors change (drastically) with every refresh in my application. Maybe I can combine your approach with other techniques and make it a little more static or deterministic. – User42 Oct 24 '16 at 14:28
  • You could generate a set that's above your current max number of items (say, 20 or 30) once and pair it with a category. Then keep that same color for the category permanently – Zach Saucier Oct 24 '16 at 16:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.