はじめに
この記事はこの記事に載っているライブラリを機能的観点から調べてまとめただけです。
https://madewithvuejs.com/blog/top-vue-js-chart-components
調べが甘いこともあると思うので、「これできるよ！」とか、「これもいいよ！」とか、「これできなくね？」みたいなのあったらコメントお願いします。
調査結果
JSCharting
・カチカチのグラフ（株価や資産チャートなどに使われてそう）
・かなりいろんなことができる
・Vue用のラッパーライブラリは4ヶ月前にできたばかりで全然使われておらず、メンテナンスが継続されるか怪しい上に、まだWEB上に情報があまりない
https://github.com/jscharting/jscharting-vue
VueTrend
・とてもシンプル
・名前の通り時間が絡むデータを見る専用
・シンプルすぎて表示以外おそらくなんの機能もない
HighCharts
・商用利用だと有償
・Nuxtで使っている日本語記事が２件ほどある。
・複数グラフも可能
・複数y軸も可能
・公式のVueラッパーの他にNuxt対応方法も書いてある非公式ラッパーがあるが、記事で普通に公式ラッパーでnuxt対応していたのでどちらでもよさそう
公式：https://github.com/highcharts/highcharts-vue?ref=madewithvuejs.com
非公式：https://github.com/superman66/vue-highcharts#readme
・tooltipはできる
・ズームもできるがこんな感じなので説明を書かないと気づかなそう↓
https://www.highcharts.com/demo/line-time-series
ZingChart
・Vueに特化している、多機能、デモ、テンプレが豊富
・デザインが良い
・Nuxtで使われた記事が見当たらない
・日本語記事はない
・複数グラフも可能
・複数y軸も可能
・ズームはhighchartと同じ仕様
VueEChart
・Nuxtの対応方法がgithubに書いてある
・英語のドキュメントすら少ない（Echart自体がBaidu製なので）
・公式は英語なので公式だけを頼るしかない
・複数グラフも可能
・複数y軸も可能
・ズームはいい感じ↓
https://echarts.apache.org/examples/en/editor.html?c=area-simple
Vue-chartjs
・Nuxtでも使えている
・ネットに情報がたくさんある
・複数グラフも可能
・複数y軸も可能
・ズームは直感的にできる↓
https://nagix.github.io/chartjs-plugin-streaming/samples/zoom.html
Vue Morris
・シンプルなグラフ
・Nuxtだとエラーが出るというissueが上がっているが、できている記事が３つほどある
・日本語記事なし
・複数y軸なさそう
ApexCharts
・サーバーサイドにも統合用ライブラリを提供している（なんだそれ！？）
・デザインが良い
・他よりも多機能、拡張的な機能が揃っている
・複数グラフも可能
・複数y軸も可能
・ズームはhighchartと同じ仕様だけどInteractivityがあって良い↓
https://apexcharts.com/docs/interactivity/
・client modeにすればnuxtで動きそう
所感
個人的にはApexChartsが良い感じでした。
Interactivityもあり、デザインもよく、最近のライブラリという感じがします。
データ数が25000のデモもあって、ハイパフォーマンスなのも良いですね。
逆にVueEChart,JSChartingはネット上の情報の量的に不安があります。
HighChartは商用だと有償です
Vue-chartjsはネット上の情報が結構豊富で安心です。
こんなにいっぱいあると悩んじゃいますね。