I have recently had a chance to work on graphs and charts, and I'm facing a problem when there are a lot of bars in a chart or stacked bars in a graph.

Should we consider going with eye soothing colors which don't really affect users? Or should we make it clear by using the colors which have enough contrast between them, instead of going with different shades on the same color?

Which would be a better experience to the user? Should colors match with the style guide colors of the platform, or can they have a different set of colors?

enter image description here

Edited : Below is new color scheme which made New Color Scheme

  • Are you talking about a single chart that displays different sets of data, or multiple correlated charts? – Stefano Aug 28 '17 at 12:26
  • I edited my answer so it is less general. – jazZRo Aug 31 '17 at 9:59

Graphs are always used to display different set of values. Contrast helps users to instantly distinguish and categorize the values; whereas shades of same color will create confusion and would require more brain processing.

Always choose eye soothing colors. I don't know if anybody likes sharp, torturous colors on screen.

Read more on Practical Rules for Using Color in Charts

  • 3
    While i agree, it looks better, in this case it makes absolutely no sense to change the colors since there is no difference in the values.. china is the same as egypt, the different colors don't transport additional information so they should all have the same color. If there would be cities mixt in between then cities could use a different color then countries but thats it. – Pectoralis Major Aug 28 '17 at 11:46
  • @PectoralisMajor Each country having its own color just helps in processing the data quicker. – DPS Aug 28 '17 at 11:49
  • 3
    Just to quote the document that you posted above: "What do the different bar colors in this graph mean? Not a thing. The labels along the X-axis tell us what the bars represent. The colors add no meaning or value, but their presence suggests that they do. Consciously or not, when people look at a data display and see visual differences, they try to determine the meaning to those differences. Suggesting meanings, which aren’t there, wastes people’s time, prompting them to expend mental resources in a fruitless pursuit." – Pectoralis Major Aug 28 '17 at 11:56
  • This answer is inconsistent with the given source. – jazZRo Aug 29 '17 at 7:32
  • @jazZRo Edited it - I think just the source will be enough. – DPS Aug 29 '17 at 7:44

While DPS's response is a good start, it does not address your specific situation because you have 4 different colors touching each other in a single 'segment' of information within the entire chart.

When you put complimentary colors side-by-side, you get something like an electrical "buzzing" effect that can be very distracting and even irritating to the users' eye. https://en.wikipedia.org/wiki/Complementary_colors

I would recommend a set of colors that are in the (somewhat) same level of saturation, and keep them low on a white background, or high on a black background. https://en.wikipedia.org/wiki/Tints_and_shades

On the other hand, if two side-by-side colors are too close they can get muddled up, so I think you can make a degree of contrast to create differentiation.

To save yourself some time, you might want to try the Adobe Kuhler tool, which is free. The "Triad" palette generator will give you a set of colors that are generally of a similar enough tone.

Final note: don't forget color blindness :)


Give priority to clarity before style.

Edit to answer the question more directly: In a stacked bar where all values are evenly important make them distinguishable from each other. I wouldn't call the colors in your second example eye-soothing as they need more effort to distinguish. It also has many values, is this graph efficient enough (does it tell a story)? The first graph has not too many colors and is pretty safe to use concerning color-blindness. Read on, my previous answer was more general.

Should colors match with the style guide colors?

Is it only a eye-catcher that is more promotional than informative?
Giving priority to the style guide and beautification probably justifies a less informative graph.

In your case it looks more like informative graphs.
Give priority to a style that makes the graph more informative and easier to read. This means the choice of color has to help read the story more efficiently. With story I mean the purpose of the graph, the story you try to tell behind it.

An example: If it's a graph with a bar for each product and you want to point out how your new product is selling, it is possible to make all products the same color and the new product a different one so it will stand out. If you use red and green for example this extra reading aid will be less effective for someone with color-blindness. But if red and green represent good and bad results and is very important to communicate, this might be a sacrifice to make. See my example, these are not exactly eye-soothing colors but serve their purpose. For people with color-blindness you can add texture, a label or remove the red color from the bars leaving only the green one filled. The latter being my favourite choice in this example case, I like to reduce the style to a minimum.

enter image description here

There are complete books about this and I suggest to read at least one.


Applications rarely match graphs with the overall color scheme (depending on how many data points you have)

If you need a monochrome solution something like this is also common: enter image description here

  • The 3 grays here are quite difficult to tell apart... – Quelklef Aug 28 '17 at 20:48

In the best case scenario you use the colors you find in the style guide, you can also use different gradations of the main colors if you need more colors.

Regarding ux, you should definitely use the colors that help the user grasp the informations as soon as possible even after switching view multiple times.

If you use colors that don't have enough contrast the users will have a hard time returning to the graph to gather informations because their eye constantly has to relocate. Contrasts really help the user to scan those graphs.

If the graphs are really simple tho, like in your example, you could also use gradations from grey in this case, for example: 100% grey, 80% grey, 60% grey, 40% grey... at the end it depends on the informations you want to transmit. The more complex the information, the bigger the contrasts should be.

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.