◆ Canvas は更新面で不利
  ◆ アニメーションとかマウスホバーの処理などで全体再描画になるので重い
  ◆ データ数が少ないとたいしたことないけど すごく多くのデータを扱うとかなら SVG が無難

グラフを作ったりするチャート系ライブラリ
いろいろありますが 大きな違いに描画部分を Canvas でするか SVG でするかというのがあります

どっちでもいいやと思ってたのですが 使ってみると気になる違いがありました
結論を先に書くと SVG のほうが軽いです
大量のデータになると Canvas だと表示されるまでに時間がかかりますが SVG の方はそこまでかかりません

SVG のほうが良さそうな理由

仕組みを考えても Canvas は部分的に変更できなくて 1 から再描画する必要があるのに比べて SVG は HTML みたいな XML ベースなので部分的に変更ができるのでブラウザがいい感じに最適化してくれます
例えばマウスを乗せたときに 詳細情報を表示する処理だと SVG の場合は HTML で position: absolute にした DOM を配置するのと同じ感じでグラフ部分はそのままで詳細を表示するウィンドウだけ更新できます
Canvas だと全体が画像のようなものなので すでにあるものを消したり動かしたりができません
グラフ部分も含めて全部を再描画です
データが少ないと再描画しても大したことはないですが 何万何十万というデータをプロットしたグラフだとマウスを動かすたびにその数のデータを再描画することになります

またアニメーション機能がある場合は SVG だとアニメーション機能があるのでブラウザが最適化してくれますし 必要な部分のみで済みます
それが Canvas だと途中段階を計算して毎回 Canvas を再描画です
HTML のアニメーションで CSS を使わず JavaScript で setInterval を使ってアニメーション途中の状態をスタイルに設定するようなものに加えて Canvas に再描画ですから考えるだけで重い処理ですよね

Canvas でもレイヤを分けて複数の Canvas に描画して更新の必要がないレイヤは再描画しなくて済むようにするとか アニメーション前の状態で動かない部分のみ描画しておいてそれをバックアップしておき アニメーション中はバックアップのコピーに動きがある部分だけを描画するとか 最適化も考えられそうですが考えるだけで大変そうなので やってるのは少ないんじゃないでしょうか

ちょっと古いですが 有名どころの Highcharts が Canvas から SVG に変えたときの理由がここに載ってます
https://www.highcharts.com/blog/news/12-highcharts-goes-svg/

Canvas のほうがいい場合

パッとは思いつきません
SVG だと DOM 構造的に svg タグの中に要素がいっぱい作成されるのに対して canvas タグのみで子要素は何もない違いはあるものの そこまで困らない気がします
もし 実装的に Canvas タグ 1 つで完結してほしいとかあるなら Canvas を選ぶメリットになると思います

一見 Canvas のほうが画像化しやすそうですが 画像化する場合は Canvas は PNG などに出力できますが SVG だとそのまま SVG ファイルで保存すれば拡大縮小にも強いベクタ画像ファイルにできます
PNG にしたい場合も 一時的に Canvas を作って Canvas に SVG を draw すれば PNG になりますし
SVG のほうが優れてると言えそうです

とは言っても Canvas で困るのはすごくデータが多い場合だけなので データ量が多くないなら Canvas を使ってようと 見た目や API が使いやすいライブラリを使えば良いと思います

チャートライブラリ

有名どころのチャートライブラリがどっちを使ってるのか調べてみました
デモの DOM を確認してるので もしオプションでどっちにでもできるというのがあった場合はデモに使われてる方になります

HighCharts

https://www.highcharts.com/blog/products/highcharts/

SVG

1, 2 を争うくらいの有名どころ(私感です)であちこちのサイトでみかけるライブラリです
有料ぽいけど Github にソースが公開されていて無料でも使えます
ライセンス的には Non-commercial だと無料だそうです
https://shop.highsoft.com/highcharts

amCharts

https://www.amcharts.com/javascript-charts/

SVG

新し目?見た目がきれいでアニメーションもできて高機能な雰囲気
有料版もあって 違いは有料版だとスタッフのサポートや amPlus というもののサブスクリプション付きらしいです
また 有料版はチャート上の amCharts のロゴを消せるようです
ロゴと言っても主張が大きくないし 見た目もグラフみたいなものであまり消したいと思うような見た目じゃないです
https://www.amcharts.com/online-store/

Chart.js

https://www.chartjs.org/

Canvas

無料の定番って感じのライブラリ
シンプルできれいな見た目が好きです

Chartist

https://gionkunz.github.io/chartist-js/index.html

SVG

無料でシンプルなライブラリ
Chart.js が迷うやつ
シンプルなもので SVG がいいならこれでいいかもしれません
デモ見た感じではアニメーションはありますが マウスを使った機能はなさそうです
インタラクティブなものではなくただの SVG 画像をつくるという感じです

C3.js

https://c3js.org/

SVG

D3.js ベースのライブラリ
シンプル過ぎて見た目がちょっと物足りない感じがします
見た目のシンプル差に対して マウスを乗せたもの以外を薄くしたり 詳細情報を表示したりと機能がいろいろありそうです

taucharts

http://www.taucharts.com/

SVG

こっちも D3.js ベースのライブラリ
見た目が派手で綺麗な感じです
グラフィカルな部分に特化させてる気がします

NVD3

http://nvd3.org/

SVG

これも D3.js ベースのライブラリ
taucharts に比べると色はおちついた感じ(悪くいうと地味)

CanvasJS

https://canvasjs.com/

Canvas

見た目も綺麗で高機能
Non-Commercial 利用だと無料です
https://canvasjs.com/license/
Canvas が複数重なってたのでレイヤー分けされてそうです
グラフのポイントをドラッグで好きな位置に移動できる機能って初めて見たかも……

ApexCharts

https://apexcharts.com/

SVG

見た目キレイでここまでの感じだと HighCharts などのように一部有料かなと思ったのですが 有料版はなく全部無料で Commercial 利用も無料のようです