怪しいチャート

Web

Nuxt3でApexChartsを使い多軸yaxisと複数のsiriesを紐付ける

ApexChartsを使ってチャートを導入した際にハマって、調べまくったので、メモ。グラフの数字と縦軸の数字がかみあわない事案が発生しました。具体的には2軸あり、1軸に2つのsiriesを紐付けるというもの。yaxisのseriesNameが関係するのは、いろんなサイトを見てわかりましたが、紐付けると4軸できたりと、うまくいきません。そんな時に見つけたのがこちら。

Multiple Yaxis for multiple series · Issue #462 · apexcharts/apexcharts.js
Hi, I need to have multiple yaxis. Every yaxis also needs to…
GitHub

seriesのnameに全国の報告数と全国の定点あたりが設定してあり、seriesNameで紐付けるnameを指定し、show: trueとshow: falseでコントロールするみたい。助かったぜ！

  yaxis: [
    {
      seriesName: '全国の報告数',
      title: {
        text: '報告数',
      },
      labels: {
        formatter: (val: number) => $filter(val.toFixed(0))
      },
      show: true,
    },
    {
      opposite: true,
      seriesName: '全国の定点あたり',
      min: 0,
      max: 30,
      title: {
        text: '定点あたり',
      },
      labels: {
        formatter: (val: number) => val.toFixed(2)
      },
      show: true,
    },
    {
      seriesName: '全国の報告数',
      show: false,
    },
    {
      seriesName: '全国の定点あたり',
      show: false,
    },
  ],

コメント