CSS Gridを使ったグラフ表示

CSS Grid Layoutが全主要ブラウザで利用可能になったことで、いままでCanvasやSVGでがんばっていたグラフ描画も、HTMLとCSSだけで簡単に実装できるようになった。HTMLでグラフが書けるメリットは、レスポンシブで、かつアクセシビリティに有効であるという点に尽きる。

CSS Grid Layoutを使ったグラフ描画を簡単に説明すると、columnやrowを100分割してパーセントをCSS変数で指定するという実装方法だ。

<figure>
  <dl class="graph">
    <div class="bar" style="--value: 83;">
      <dt>りんご</dt>
      <dd>1,234</dd>
    </div>
    <div class="bar" style="--value: 30;">
      <dt>みかん</dt>
      <dd>446</dd>
    </div>
  </dl>
  <figcaption>CSS Grid Graph</figcaption>
</figure>

.graph {
  display: grid;
  grid-template-columns: repeat(100, 1fr);
}

.bar {
  /* start位置を変更することで、widthより表現力の高いグラフが実装できる */
  grid-column-start: 1;
  grid-column-end: var(--value); 
}

デモ