【Nuxt.js v2】Chart.jsで複数のグラフを重ねて描画する

chartData.datasetsで、異なるグラフタイプを設定したいデータのtypeを指定する。
以下では、Barをベースとしたチャートに、Lineのチャートを表示している。

<script>
import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  data () {
    return {
      chartData: {
        labels: ['2021年4月', '2021年5月', '2021年6月'],
        datasets: [
          {
            label: '売上',
            data: [10, 20, 15]
          },
          {
            label: '予算',
            data: [8, 22, 12],
            type: 'line',
            tension: 0,
            fill: false
          },
        ]
      },
      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                min: 0
              }
            }
          ]
        }
      }
    }
  },
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}
</script>

複数タイプのチャートを表示する場合、どのタイプをベースにするかによって表示される体裁が変わる。
以下では、LineをベースとしたチャートにBarのチャートを重ねて表示しており、上記とは少し異なる表示になっている。

<script>
import { Line } from 'vue-chartjs'

export default {
  extends: Line,
  data () {
    return {
      chartData: {
        labels: ['2021年4月', '2021年5月', '2021年6月'],
        datasets: [
          {
            label: '売上',
            data: [10, 20, 15],
            type: 'bar'
          },
          {
            label: '予算',
            data: [8, 22, 12],
            tension: 0,
            fill: false
          }
        ]
      },
      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                min: 0
              }
            }
          ]
        }
      }
    }
  },
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}
</script>