data-chart

Anti-FOUC

FOUC (Flash of Unstyled Content) は、JavaScript がテーブルをチャートに変換する前に、生のテーブルが一瞬表示される現象です。

デフォルトの動作

data-chart は初期化時にすべての table[data-chart] 要素を非表示にする CSS を自動注入します。ほとんどの場合、追加の CSS は不要です — スクリプトを読み込むだけで動作します:

<script src="https://unpkg.com/data-chart" defer></script>

ただし、defer スクリプトは HTML パース後に実行されるため、スクリプトが実行されて非表示 CSS が注入されるまでの間、テーブルが一瞬表示される可能性があります。

オプション: フラッシュを完全に排除

ゼロフラッシュの読み込みが必要な場合、<head> にインライン <style> を追加してください:

<style>
  table[data-chart] {
    visibility: hidden;
    position: absolute;
    width: 0; height: 0;
    overflow: hidden;
  }
</style>

この CSS は <head> 内にあるため、JavaScript の読み込みより先にブラウザが解釈します。そのためテーブルが一瞬表示されることはありません。

Vite や webpack などのバンドラーを使用している場合は、上記と同じ CSS をモジュールとしてインポートすることもできます:

import 'data-chart/css';

<noscript> フォールバック

上記のインライン CSS を使うと、テーブルは常に非表示になります。JavaScript が無効な環境では data-chart が動作しないため、テーブルがまったく見えなくなってしまいます。

<noscript> を使って、JS 無効時にはテーブルを再表示させましょう:

<noscript>
  <style>
    table[data-chart] {
      visibility: visible;
      position: static;
      width: auto; height: auto;
      overflow: visible;
    }
  </style>
</noscript>

レイアウトシフト (CLS) の防止

チャート SVG の挿入はレイアウトシフトを引き起こす可能性があります。これを防ぐには、aspect-ratio を使ってチャートコンテナのスペースを確保します:

.chart-wrapper {
  aspect-ratio: 500 / 220;
}

SVG の viewBox 幅は常に 500 です。高さのデフォルトは 220 で、data-chart-height で変更できます。カスタム高さを設定した場合は、比率も更新してください:

<table data-chart="bar" data-chart-height="300">...</table>
.chart-wrapper {
  aspect-ratio: 500 / 300;
}

インライン Anti-FOUC CSS とスペース確保を組み合わせることで、CLS を効果的に排除できます。