20

I have a plot where I stack the color white and black as values by month. I would use white as background color but the data is black and white as the color is. I'm using blue which I don't like. Any suggestions what I can use for my background? Or highlight them from the background?

enter image description here

Improve this question
9
  • 31
    Why not consider different colors for the black and white?
    – Nicolas Hung
    Jun 12, 2019 at 12:18
  • 14
    The plot show sells of the same product in different colors (black and white). I think it make no sense to use red as fill color for the product in white.
    – flexitaga23
    Jun 12, 2019 at 12:30
  • 10
    you're using 2 colors in your bars, you could use literally any other color in the wheel. I don't see the problem.
    – Luciano
    Jun 12, 2019 at 12:30
  • 6
    You might find that you run into contrast issues. I would seriously look for another solution - it could be different colours or maybe a different chart type would help
    – Roux Martin
    Jun 12, 2019 at 12:38
  • 4
    You might get better answers at Graphic Design SE (graphicdesign.stackexchange.com).
    – locationunknown
    Jun 12, 2019 at 12:51

4 Answers 4

Reset to default
53

White is giving the appearance as the absence of data. Data visualization is not about what you intend, it's about what they perceive.

Black and white have connotations as opposites. Some cultural connotations are good/bad, empty/full, etc. These vary. Seeing this much black and white is also harsh on the eyes.

I'm losing track that these are parts of a whole: total sales for that time period.

Is there a specific reason you have to use just this combination?

Not part of your question, but a thought on understanding trends

Stacked bar charts present visualization challenges, as it's not possible without a legend that's interactive to show the growth of the 2nd (black) category not tied to the baseline of the x-axis.

Can you allow your users to select / deselect the legend (or switch views) to display sales trends more clearly by each product line?

enter image description here

enter image description here

What stacked bars show

To identify distribution along time of parts of a whole, you need enough contrast to identify the parts, but not too much that it appears to be a completely separate entity.

The whole set for each time period is Sales. Each product could be considered an aspect of what constitutes total sales units (or revenue, it's unclear from your chart).

What happens the moment you introduce a third product?

Rather than trying to fit a solution, can you test your approach with users?

Since the goal is to impart understanding of:

  • total sales, month over month
  • the performance of one product as compared to another

Could you ask users how they interpret the data? 'Which product is performing better', 'What are the trends?'

It could turn out that your black/white presentation can work, but in the absence of testing for understanding the data and its trend, you will not be fulfilling the purpose of a visualization.

Improve this answer
7
  • 1
    "Is there a technical/branding reason you can't reconsider?" - in a comment, the OP has stated that "The plot show sells of the same product in different colors (black and white)."
    – O. R. Mapper
    Jun 12, 2019 at 14:01
  • 2
    Also, I agree with your statement "White is giving the appearance as the absence of data." in general, but ... maybe I'm biased already due to reading the aforementioned comment/explanation for the colours, but as hard as I try to focus on the idea that "white indicates absence", I cannot make myself perceive the white parts of the bars in OP's chart as absence of anything.
    – O. R. Mapper
    Jun 12, 2019 at 14:03
  • 4
    Thanks for the taped sticky notes. Now how do I get the glue off my monitor?
    – Rich
    Jun 13, 2019 at 17:00
  • 1
    @BruceWayne: You mistyped a word:  “It’s not what you say, it’s what they hear.”  (Also, I would recommend a semicolon (‘;’) there.)
    – Scott - Слава Україні
    Jun 15, 2019 at 4:22
  • 1
    @Scott bah! Yeah that's a typo thanks for catching.
    – BruceWayne
    Jun 15, 2019 at 4:23
35

Stacked bar charts often use a darker colour at the bottom and lighter colour at the top. Bolder darker colours look strong and more supportive of what's on top. Your chart bars looks top heavy, with black areas 'floating', rather than the bar giving the impression of 'tapering up to the sky'. Outlining the bars would also help to stop the bleed from one bar to an adjacent bar.

Here's a quick mock-up of an alternative:

enter image description here

Improve this answer
1
  • 21
    There's another important reason why this plot is more readable than all the alternatives: the border around the white part of the bar.
    – Federico Poloni
    Jun 13, 2019 at 14:15
22

If black and white maps to the colors of the products, then consider outlining the white bar to add some contrast.

Some Tips: What to consider when creating stacked column charts

enter image description here

Improve this answer
1
  • As the OP has stated in a comment, the black and white bars represent products coloured black and white, respectively. It would be interesting to see the above examples from your answer with category labels "black" and "white" rather than somewhat generic labels such as "False" or "Positive".
    – O. R. Mapper
    Jun 12, 2019 at 14:05
1

I often like using something like #f5f5f5/#f1f1f1 as a light grey background - this lets white stand out a bit (albeit, subtly). Then I can add a subtle shadow or border to the white object and it really pops (The testimonials here for example https://zudu.co.uk/). Something similar may work here but i'm not sure if shadows will work on bars that are touching?

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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