3月17日、Nick Downie氏がcanvasを使ったJavaScriptチャートライブラリ、Chart.jsをMITオープンソースライセンスで公開した。これはSVGベースのチャートライブラリに代わるものだ。
「理解しやすいシンプルなAPIによってWebデザイナーが求める美しさを実現でき、なおかつ開発者が複雑なWebアプリケーションに組み込むことができるような、軽量でポータブルですぐに使えるチャートライブラリを作りたかったんです」Downie氏は語る。
Chart.jsは、データとチャートをレンダリングするAPIにより、6種類のチャートを提供している。Downie氏は大学最後のプロジェクトとして、1ヶ月かけてライブラリを構築し、ドキュメントをまとめた。17日にオープンソースにして以来、「あまりの反応に圧倒されています。Hacker newsにリンクを投稿したのですが、1日後には何万ものアクセスがあり、Githubはイシューとコントリビューションでいっぱいです」とDownie氏は言う。
SVGのチャートライブラリのようにチャート要素ごとに複数のDOMノードをレンダリングするのではなく、Chart.jsは単一のcanvasノードを使っている。この単一ノードレンダリングのため、Chart.jsにはイベントリスナーのフックが1つしかない。その結果、「メモリ上のやり取りが必要な領域を記録し、現在のマウス位置をチェックする間に、それら領域をイテレートします。ユーザがマウスを動かすたびにこれを繰り返すのは負荷がかかります。canvas上にツールチップを直接描画すると、定期的にcanvasのクリア/再描画をすることになるのです」Downie氏は言う。「こうしたカスタマイズについて、全員のニーズを実現するシンプルなAPIを考え出すのはなかなか難しいことです。ツールチップを必要とする人もいれば、チャートに線を引きたかったり、データポイントをハイライトしたい人もいます。そうやっていくと、すぐに複雑になっていきます」 Downie氏は言う。彼はツールチップの追加を受け入れるだろうが、「サイトやアプリにシンプルで静的なグラフを入れたい開発者にとって、かなりの負荷を伴う複雑なソリューション（SVGによるチャート）」の代わりとして、Chart.jsをプロモートしたいと思っているようだ。
シンプルなAPIというのはcanvasを使ったアプローチの利点の1つだが、Chart.jsはcanvasが生成するラスターイメージに依存するため、ベクターベースのSVGチャートツールにあるようなスケーラビリティがない。これについてDownie氏は「レスポンシブレイアウトのためには、（canvas上の）CSS widthに基づいたパーセントを宣言してください。Hi-DPIディスプレイの場合、Chart.jsは自動的に正しいdevicePixelRatioにスケールし、CSSによる正しいデバイスピクセルサイズにスケールダウンします」と言っている。
canvasならではの機能は、toDataUrlによって、base64画像をエクスポートできることだ。「将来のリリースでは、生成後のチャートに対するユーティリティ関数をいくつか追加するつもりです。これにより、ユーザは簡単にチャートのクリア、アップデート、エクスポートすることができます。基本的に、Chart.jsはこの関数のラッパーを提供することになります」Downie氏は言う。
彼はこの春卒業し、いくつかの機能をChart.jsに追加するとともに、卒業後はフルタイムの仕事に専念するつもりだ。「（Chart.jsは）Webデザインコミュニティの人たちにとって非常にエレガントで（願わくば）役に立つものを作るために、デザインと開発をミックスするよい口実になりました。」