Restyle: bar chart

[shixiedesign]

New style of Bar chart is below. Reference text in #D6316C for measurements. In general we are thinning the bars to align with the new language's more delicate, refined look & feel.

• standard bar
• multi-dimensional bar (grouped bar)
• stacked bar
• horizontal bar

[theiliad]

@shixiedesign Couple of points here:

1. In stacked bar, how would we add a 1px gap to a linear y-axis? That would introduce some inaccuracy.
2. We can't have too much fill related logic in elements, since we won't know exactly how users will form their color palettes. If we were to check, that'd introduce lots of additional logic in the code. Seems like some of those items should be enforced by team designers through our design spec documents?

[shixiedesign]

@theiliad Again sorry for the late response:

1. [Stacked bar] Right. Unfortunately, the 1px white line will cause inaccuracy and it's the trade off for accessibility in stacked bar. It's technically not a gap, but a divider line, and for the sake of accuracy, I think it should sit at the base of the top bar, so the bottom bar color will be aligned to true value. We definitely want the tooltip to help with reading exact value (see below img). Eyeballing value would be inaccurate even without the white divider line.
   

2. [Multidimensional bar] I believe we agreed to use every nth child to target all the even number bars, and those bars will get a 1px border top with #000000 at 0.3 opacity. Lemme know if this aligns with your understanding.

[theiliad]

These specs were all implemented in Q3 2019. Let me know if anything is missing

In terms of combo charts we should create a separate issue