Charts.cssは、CSSとHTMLのみに依存する新しいデータ視覚化ライブラリである。JavaScript/Canvasの使用を回避することで、既存のソリューションでのアクセシビリティの課題の多くを回避できる。それと共に、縮小化およびgzip圧縮することでバンドルサイズを10kb未満に維持できる。
優れた機能セットを提供するJavaScriptデータ視覚化ライブラリが不足することはない一方で、多くの場合、非常にかさばり、部分的なアクセシビリティサポートを提供し、もちろんJavaScriptに依存する。
CSSとHTMLのみを使用してグラフを描画する代替案は、2015年までさかのぼるいくつかの興味深い例を以って、何年にもわたって議論されてきた。印象的ではあるが、これらの例は、チャートライブラリの実際の要件の多くに対応していなかった。そのため、JavaScriptライブラリによって提供されるものよりも劣った開発者エクスペリエンスやユーザーエクスペリエンスとなっていた。
Charts.cssは、この問題に対処する。それと共に、開発者が自身のWebサイトに簡単に統合できるようにする一貫性のある使いやすい構造を提供しようとするものである。
基本的なCharts.cssグラフには、3つのHTML要素が含まれる。ラッパー、凡例を含むリスト、データを含むテーブルである。テーブルクラスには、描画されるチャートを定義する
<div class="wrapper">
<ul class="charts-css legend">
</ul>
<table class="charts-css <chart-type>">
</table>
</div>
データの視覚化はテーブルの値に関連付けられていないため、データの追加には少し注意が必要である。たとえば、次のテーブル列は、値が異なっていても同じ高さで表示される。
<table id="data-example-1" class="charts-css column">
<tbody>
<tr>
<td>$40K</td>
</tr>
<tr>
<td>$60K</td>
</tr>
</tbody>
</table>
これを修正するには、CSS変数--sizeを変更して、各列の相対値を定義する必要がある。たとえば、範囲として0K～100Kを使用する場合、$40Kセルは次のように定義できる。
<td style="--size: 0.4">$40K</td>
グラフを描画するのに$40Kは必要なく、次のような.dataクラスを含むspanでグラフをラップすることで非表示にできることに注意してください。
<td style="--size: 0.4"><span class="data"> $40K </span></td>
チャートの視覚化を制御するために、Charts.cssはチャートのさまざまな側面を制御するCSSクラスのセットを提供する。例えば、間隔（.data-spacing-）、方向（.reverse）、軸（.show-primary-axis、 .show--secondary-axes）などである。さらに、多くのCSSプロパティに直接アクセスできるため、開発者はアニメーションなどのさまざまな機能を追加できる。
Charts.cssは、MITライセンスの下で利用可能なオープンソースソフトウェアである。