Charts.css: 純粋なCSSでチャートを構築する

ほとんどのフロントエンド開発者は、デザインでデータ可視化が必要になると、本能的にChart.jsやD3.jsに手を伸ばします。それは妥当なデフォルト選択です――ドキュメントページやシンプルなダッシュボードで棒グラフをレンダリングするためだけに、数百キロバイトのJavaScriptを読み込むまでは。Charts.cssは異なるトレードオフを提供します:セマンティックなHTMLテーブル上に構築された純粋なCSSデータ可視化で、JavaScriptレンダリングエンジンは不要です。

以下では、その仕組み、得意な領域、そして適用が困難になる場面について説明します。

Charts.cssの仕組み: CSSでスタイル付けされたHTMLテーブルチャート

Charts.cssは、ユーティリティクラスとCSSカスタムプロパティを使用して、標準的な<table>要素を視覚的なチャートに変換するCSSフレームワークです。レンダリングにJavaScriptは関与しません。ブラウザのレイアウトエンジンがすべての視覚的処理を行います。

核となるアイデアはシンプルです:データは実際のHTMLテーブルに存在します。Charts.cssはそのテーブルをチャートのように見えるようにスタイリングします。これは、基礎となるデータが追加の労力なしにスクリーンリーダーや検索エンジンからアクセス可能であることを意味します――ただし、完全な恩恵を受けるには適切なマークアップが必要です。

インストール

CDN経由:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css">

npm経由:

npm install charts.css

CSSカスタムプロパティによるデータ表現

テーブル内の各データセルは、--sizeカスタムプロパティを使用して、その値を0から1の間の数値として表現します。この正規化された値が、Charts.cssが視覚要素――バー、セグメント、ポイント――のサイズを決定するために使用するものです。

以下は最小限の棒グラフの例です:

<table class="charts-css bar" style="height: 200px;">
  <caption>Monthly Signups</caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Signups</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">January</th>
      <td style="--size: 0.4;">400</td>
    </tr>
    <tr>
      <th scope="row">February</th>
      <td style="--size: 0.7;">700</td>
    </tr>
    <tr>
      <th scope="row">March</th>
      <td style="--size: 1.0;">1000</td>
    </tr>
  </tbody>
</table>

charts-cssクラスがフレームワークを有効化します。barクラスがチャートタイプを設定します。各<td>の--size値が、バーの長さを比例的に制御します。

異なるチャートタイプの適用

チャートタイプの切り替えは、クラスの変更で行います。Charts.cssは、bar、column、line、area、pieなど、いくつかのタイプをサポートしています。機能サポートは異なります――barとcolumnが最も洗練されており、一部のタイプはカスタマイズオプションがより限定的です。

<!-- Column chart -->
<table class="charts-css column">

<!-- Line chart -->
<table class="charts-css line">

<!-- Pie chart -->
<table class="charts-css pie">

追加のユーティリティクラスで、ラベル、軸、スペーシング、データ表示を処理します:

<table class="charts-css bar show-labels show-primary-axis data-spacing-10">

アクセシビリティ: 実在するが自動ではない

Charts.cssは実際の<table>マークアップを使用するため、スクリーンリーダーは生データに直接アクセスできます――これはcanvasやSVGベースのライブラリに対する真の利点です。しかし、これはテーブルを正しく記述した場合にのみ機能します:<caption>を含め、適切なscope属性を持つ<th>を使用し、セルの内容が意味を持つようにしてください。フレームワークは構造を提供しますが、アクセシビリティは依然としてマークアップに依存します。

CSSチャートが有効な場面――そして適さない場面

Charts.cssが適している用途:

• ドキュメントサイトと静的ページ
• 更新頻度の低いデータを持つシンプルなダッシュボード
• バンドルサイズが重要な軽量レポート

以下の用途には適切なツールではありません:

• ツールチップ、ズーム、クリックイベントを持つインタラクティブなチャート
• リアルタイムまたは頻繁に更新されるデータ
• フォースグラフやカスタムスケールのような複雑な可視化
• 細かいレンダリング制御が重要な大規模データセット

これらのケースでは、JavaScriptライブラリが正当な理由で存在します。

結論

Charts.cssは焦点を絞ったツールです。1つのことをうまく実行します:セマンティックなHTMLテーブルデータを、JavaScriptレンダリングロジックを一行も配信せずに、読みやすいCSSチャートに変換します。静的または低インタラクティビティのコンテキストでは、その小さなフットプリントは議論の余地がありません。ただし、明確な期待を持って取り組んでください――これはJavaScriptチャートライブラリの補完であり、置き換えではありません。

よくある質問

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.