Bar charts

This type of graph is used to represent one-dimensional data (in our example, a timeline). It's based on CSS grids and custom properties, a technique inspired by an article by Miriam Suzanne on CSS Tricks with a slight enhancement to improve accessibility. Here's how to use it:

  1. On the table itself, the --scale custom property is used to define the maximum value for the graph, in order to determine its scale. Concretely, a grid will be generated with:
  2. On each cell <td>, a --value custom property allows to place it on the grid, applied to grid-column-end. Moreover, thanks to clever calculations based on this value, the background gradient is sized and positioned to reflect the proportion represented by this value on the given scale (from green for almost nothing to red for almost everything).
  3. In each cell, the content must include the value and its unit in a <span> element, possibly tagged with <abbr> (and aria-label to complement title) if a title can explicit the unit. This value is pushed to the right of the grid, and its text serves as a mask for the background gradient — thanks to S. Shaw's trick to apply background-clip: text as a progressively enhancement — allowing it to be the corresponding color at the end of the gradient for the given position.

Switch
Allows you to disable styles on the following table.

Loading time for ffoodd.fr
Cumulative loading time
Time: backend ms
Time: Frontend 96 ms
Delay: first byte 102 ms
Delay: last byte 129 ms
Delay: first image 188 ms
Delay: first CSS 194 ms
Delay: first JS 326 ms
DOM Interactive 836 ms
DOM loading 836 ms
DOM complete 2561 ms
HTTP traffic completed 2980 ms
HTML
<table class="chaarts bar" style="--scale: 3000">
  <caption id="caption-1">[…]</caption>
  <thead class="sr-only">
    <tr>
      <td></td>
      <th scope="col">[…]</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">[…]</th>
      <td style="--value: 4">
        <span>[…]</span>
      </td>
    </tr>
    <tr>[…]</tr>
  </tbody>
</table>
css
@supports (grid-template-columns: repeat( var(--scale, 100), minmax(0, 1fr) )) {
  .chaarts.bar caption {
    text-align: initial;
    text-indent: 13.5rem;
  }

  .chaarts.bar tr {
    display: grid;
    grid-auto-rows: 1fr;
    grid-row-gap: .5rem;
    grid-template-columns: minmax(min-content, em( 200 ) ) repeat( var(--scale, 100), minmax(0, 1fr) ) 10ch;
    transition: opacity .2s cubic-bezier(.5, 0, .5, 1);
  }

  .chaarts.bar th {
    grid-column: 1 / 1;
    margin: .5rem 0 0;
    padding: 0 1rem 0 0;
    text-align: right;
  }

  .chaarts.bar td {
    --size: calc( var(--scale, 100) * 100% );
    --position: calc( var(--value, 0) / var(--scale, 100) * 100% );
    background-blend-mode: hard-light;
    background-position: var(--position) 0%, center;
    background-size: var(--size) 100%, contain;
    grid-column: 2 / var(--value, 0);
    margin: .5rem 0 0;
    position: relative;
  }

  .chaarts.bar span {
    font-weight: bold;
    left: 100%;
    line-height: 1.5;
    position: absolute;
  }

  @supports (background-clip: text) or (-webkit-background-clip: text) {
    .chaarts.bar span {
      background: inherit;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  }

  /* @note Sass @each() */
  .chaarts.bar tr:nth-child(2n + 2) td {
    background-image:
      linear-gradient(to right,
        #01ac49,
        #444,
        mediumblue,
        rebeccapurple,
        crimson
      ),
     var(--stripes);
  }

  .chaarts.bar tbody:hover tr {
    opacity: .5;
  }

  .chaarts.bar tbody:hover tr:hover {
    opacity: 1;
  }

  @media screen and (-ms-high-contrast: active) {
    .chaarts.bar tr:nth-child(2n + 2) td {
      background-image:
        linear-gradient(to right,
           Window,
           ButtonFace,
           ButtonShadow,
           ButtonText,
           highlight
        ),
      var(--stripes);
    }
  }
}

Waterfall

The principle is the same for this variant, except for one detail: we also manage the starting point for each measurement — which is, very simply, the value of the previous point… However, all the values must be passed as variables on the parent <table>.

Switch
Allows you to disable styles on the following table.

Loading time for ffoodd.fr
Cumulative loading time
Time: backend ms
Time: Frontend 96 ms
Delay: first byte 102 ms
Delay: last byte 129 ms
Delay: first image 188 ms
Delay: first CSS 194 ms
Delay: first JS 326 ms
DOM interactive 836 ms
DOM loading 836 ms
DOM complete 2561 ms
HTTP traffic completed 2980 ms
HTML
<table class="chaarts bar waterfall"
 style="--scale: 3000; --1: 4; --2: 96; --3: 102; --4: 129; --5: 188; --6: 194; --7: 326; --8: 836; --9: 836; --10: 2561; --11: 2980;">
</table>
css
.bar.waterfall tr:nth-of-type(2) td {
  grid-column: var(--1, 0) / var(--value, 0);
}