Overlapping Bar Charts | CSS-Methods

Because the identify suggests, overlapping charts visualize two completely different units of knowledge in a single diagram. The thought is that the overlapping bars enable us to check knowledge, say, year-over-year. They’re additionally helpful for issues like monitoring progress for a aim the place one bar represents the aim and the opposite exhibits the present quantity.

However they’re lovely too!

Your thoughts might be like mine and is already beginning to determine the way you’d go off and code that. Right here’s how I tackled it.

The HTML

We’re going to start out with markup as a result of, nicely, that’s how we all know what wants styling.

<div class="container">
  <div class="chart">
    <dl class="numbers">
      <dd><span>100%</span></dd>
      <!-- all the way in which to 0% -->
    </dl>
    <dl class="bars">
      <div>
          <dt>2018</dt>
          <dd>
            <div class="bar" data-percentage="50"></div>
            <div class="bar overlap" data-percentage="53"></div>
          </dd>
        </div>
      <div>
      <!-- extra bars -->
    </dl>
  </div>
</div>

We might be utilizing description lists (<dl>) as it’s a far more semantic method as in comparison with commonplace ordered and unordered lists. Another excuse is that we’re together with a label inside every bar. Regular lists don’t have a tag inside them so as to add a title or description in contrast to definition lists. In easy phrases, it simply makes extra sense and is extra readable too.

The primary description record, .numbers, is the y-axis. The .bars is the place the info is visualized and I’ve made a definition record to construct the x-axis as nicely. Every record merchandise accommodates a .bar and the label as an outline time period (dt).

And what’s up with the info attribute? The data-percentage is getting used to specify the peak of the bar, which finally represents its worth on the y-axis. We might manually set it in CSS for every bar, however that’s repetitive and a whole lot of additional code that may be changed with a couple of traces of CSS.

The fundamental chart kinds

We’re working with a whole lot of two-dimensional instructions, so flexbox goes to be our good friend for getting every thing lined up. We are able to make the .chart aspect a versatile container that positions the y-axis labels and the chart beside each other within the row path.

.chart {
  show: flex;
}

We don’t even must specify the path since flexbox defaults to row. Let’s do this after which add flexbox to the record of labels alongside the y-axis whereas we’re at it since we all know these will run within the column path.

.numbers {
  show: flex;
  flex-direction: column;
  list-style: none;
  margin: 0 15px 0 0;
  padding: 0;
}

Imagine it or not, we will use flexbox once more for the bars since, they too, are operating in a row path.

.bars {
  show: flex;
  flex: auto; /* replenish the remainder of the `.chart` house */
  hole: 60px;
}

I’ve set this up in order that the .bars mechanically take up no matter house is leftover by the y-axis .numbers.

You most likely seen it within the HTML, however “bar” is definitely two bars the place one overlaps the opposite. I wrapped these in a generic <div> that we will use as yet one more versatile container that holds the definition time period (<dt>) we’re utilizing as a label and the outline particulars (<dd>) that holds each bar values:

.bars > div {
  align-items: heart;
  show: flex;
  flex-direction: column;
  flex: 1;
  place: relative;
}

Every bar goes to be the identical width, therefore flex: 1. We’re comparatively positioning the aspect whereas we’re at it as a result of we’re about to utterly place every bar and we need to make sure that they keep of their containers.

Every bar has a share peak that corresponds to the values alongside the vertical y-axis. You may additionally keep in mind that we gave every bar a data-percentage attribute — we’re going to sprinkle in a bit JavaScript that units the peak of every bar utilizing these values.

var bars = doc.querySelectorAll("dd .bar");
bars.forEach((bar) => {
  var peak = bar.getAttribute("data-percentage");
  bar.type.peak = peak + "%";
});

That’s our fundamental chart!

We need to get this to the place we will see the bars overlapping each other. That’s subsequent!

Overlapping bars

The trick to get one bar to overlap one other is humorous as a result of we’re usually attempting to forestall issues from overlapping visually in CSS. However on this case, we truly need that to occur.

The bars are already overlapping; it’s simply powerful to inform. Discover within the HTML that the second .bar in every set has a further .overlap class. Let’s use that to distinguish the bars. You’re completely free to decide on your personal styling for this. I’m including a bit padding to the .overlap bars in order that they’re wider than the opposite bars. Then I’m tweaking the stacking order utilizing z-index in order that the .overlap bars sit beneath the opposite bars.

Let’s add a legend

Legend. Such an important phrase, isn’t it? Filled with all types of which means. On this case, it’s a greater than a pleasant contact as a result of, visually, we’re jamming two bars in areas which might be usually reserved for one bar. A legend supplies context that explains what every bar represents.

<determine class="legend">
  <div class="type1">Estimate</div>
  <div class="type2">Precise</div>
</determine>

Utilizing a <determine> feels appropriate to me. They’re usually used to wrap pictures, however the spec says they’re used “to annotate illustrations, diagrams, images, code listings, and so forth.” and we’re working with a diagram. We might most likely use an unordered record to carry the gadgets, however I went with an unsemantic <div>. If anybody has an opinion on one of the simplest ways to mark this up, I’m all ears within the feedback!

As soon as once more, styling is completely as much as you:

Accessibility concerns

We’ve spent a bunch of our effort on making choices for the markup and styling of our overlapping bar chart. It’s nice thus far, however we’re undoubtedly not finished as a result of there’s extra we will do to make this a extra accessible expertise. Not everyone seems to be a sighted internet surfer, so there’s some further work to do to convey the content material in these contexts.

Particularly, we have to:

1. verify that our colours have loads of distinction between them,
2. enable keyboard customers to tab to every overlapping bar, and
3. make sure that display screen readers announce the content material.

Coloration contrasts

We’d like sufficient distinction between:

• the overlapping bars
• the bars and the chart background
• the label textual content and background

I did a bit homework upfront on the colours I used within the examples we’ve take a look at thus far, ensuring that there’s sufficient distinction between the foregrounds and backgrounds to realize WCAG AA compliance.

Right here’s what I’m utilizing:

• Overlapping bars: (#25DEAA and #696969: 3.16:1 ratio)
• Bars and chart background (#696969 and #111: 3.43:1 ratio)
• Y-axis label textual content and background (#fff and #333: 12.63: 1 ratio)

Tabbing between bars

To get this the place keyboard customers can choose every particular person bar with the Tab key, we will attain for the HTML tabindex attribute. We are able to use the next JavaScript contained in the for-each perform so as to add this property to every bar (each of them). We are going to set the tab index to 0:

bar.setAttribute("tabindex", 0);

We are able to additionally add some CSS to enhance the define when the bar is chosen whereas we’re at it:

.bar:focus {
  define: 1.5px stable #f1f1f1;
}

Saying content material on display screen readers

One other vital facet of accessibility is ensuring display screen readers can announce the bars and their percentages.

We’re working with two completely different charts in a single: a chart that exhibits “Estimated” values and one other that exhibits “Precise” values. It’d be nice if the consumer knew which bar was being introduced, so let’s label them with the aria-label attribute:

<div class="bar" data-percentage="50" aria-label="Estimate">50%</div>

Discover that we’ve the bar’s worth immediately within the HTML as nicely. That may get introduced, however we nonetheless need to visually cover it. We might use clear textual content for that, however one other means is to make use of the basic .visually-hidden trick by wrapping the worth in span:

<div class="bar" data-percentage="50" aria-label="Estimate">
  <span class="visually-hidden">50%</span>
</div>

.visually-hidden {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  peak: 1px;
  overflow: hidden;
  place: absolute;
  white-space: nowrap; 
  width: 1px;
}

Whereas we’re speaking about asserting content material, we will most likely forestall the y-axis labels from being learn. It’s not just like the consumer is lacking data, because the precise percentages for every bar are already obtainable and introduced. We are able to use the aria-hidden attribute for that:

<dl class="numbers" aria-hidden="true">
  <dd><span>100%</span></dd>
  <dd><span>80%</span></dd>
  <dd><span>60%</span></dd>
  <dd><span>40%</span></dd>
  <dd><span>20%</span></dd>
  <dd><span>0%</span></dd>
</dl>

I additionally assume it’s OK for display screen readers to disregard the legend because it’s a visible support:

<determine class="legend" aria-hidden="true">
  <div class="type1">Estimate</div>
  <div class="type2">Precise</div>
</determine>

The ultimate demo

That’s a wrap!

There we go, a chart with overlapping bars! It’s a pleasant solution to examine knowledge and I hope you will discover a use for it on some mission.

Are there different methods we might have approached this? After all! Every little thing we lined right here is merely strolling you thru my thought course of. I think about a few of you’ll have taken a distinct method — if that’s you, please share! It’d be nice to see different CSS structure methods and views on nailing the accessibility.