100万点のデータポイントがあってもスムーズなパンズームが可能なオープンソースのWebGPUベースのチャートライブラリ「ChartGPU」 – GIGAZINE

既存のチャートライブラリにはデータポイントが増えるとスムーズに動作しなくなるという欠点があります。これを補うべく開発されたのが、WebGPUベースのオープンソースチャートライブラリである「ChartGPU」です。

GitHub – ChartGPU/ChartGPU: Beautiful, open source, WebGPU-based charting library
https://github.com/ChartGPU/ChartGPU

データを視覚的なグラフやチャート(図)としてウェブサイトやアプリケーション上に表示するためのプログラムパッケージがチャートライブラリです。チャートライブラリにはさまざまなものが存在しますが、データポイントの数が増えると途端に処理が重くなるものがほとんどとなっています。そこで、データの処理にCPUではなくGPUを用いるべく、WebGPU上に構築されたチャートライブラリが「ChartGPU」です。

ChartGPUでは折れ線グラフ、面グラフ、棒グラフ、散布図、円グラフ、ローソク足チャートなどを作成可能。例えばローソク足チャートでは、OHLC(始値(Open)、高値(High)、安値(Low)、終値(Close))といった要素を、色分けしながらレンダリングできます。

対応ブラウザはChrome 113以降またはEdge 113以降、Safari 18以降です。FirefoxはWebGPUに未対応なため、記事作成時点では非対応となります。

ChartGPUのデモページも用意されており、円グラフやローソク足チャートといったグラフのデモを確認可能。さらに、100万点のデータポイントを持ったグラフのデモもあり、スムーズな動作を実現していることを確認できます。

Million Points – ChartGPU
https://chartgpu.github.io/ChartGPU/examples/million-points/

ChartGPUの作者であるhuntergemmerさんは、ソーシャル掲示板のHacker News上で「ChartGPUを開発したのは何度も同じ壁にぶつかってきたからです。チャートライブラリは『高速』をうたっているのに10万データポイントを超えると処理が追い付かないものばかりです。Canvas2Dは基本的にCPU依存で、WebGLチャートライブラリでさえほとんど計算はCPUで行なわれています。WebGPUを使ってすべての計算をGPUに移行したのがChartGPUです。Largest Triangle Three Buckets(LTTB)のダウンサンプリングはコンピュートシェーダーとして実行されます。ツールチップおよびホバーのヒットテストはGPUアクセラレーションされます。レンダリングではインスタンス化された描画が使用されます。これにより、100万データポイントを持っていても60fpsでのスムーズなパンズームができるチャートライブラリが完成しました」と語り、ChartGPUを開発した理由を明かしています。