はじめに

Chart.js(vue-chartjs) で凡例の一部を非表示にする方法。

例えば円グラフ(Doughnut, Pie)で、値が 0 のものを取り除く、など。
(※この例だと、そもそも datasets から除外するのが良いけど、他に良い例がパッと思いつかないので…)

TL;DR

  • options.legend.labels.filter で設定
    • item.index や chart.datasets[n].data[item.index] を見て 表示/非表示 を決定
    • return true で表示、return false で非表示
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
  5. まとめ
  6. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.6
BuildVersion:	19G2021

$ node -v
v12.7.0

$ npm -v
6.14.5

$ npm ls vue chart.js vue-chartjs
├── chart.js@2.9.3
├── vue@2.6.11
└── vue-chartjs@3.5.1

詳細

参考: chart.js - Is it possible in chartjs to hide certain dataset legends? - Stack Overflow

options.legend.labels.filter で設定できる。true で表示、false で非表示。

MyDoughnutChart.js

1
2
3
4
5
6
7
8
9
10
11
import { Doughnut, mixins } from 'vue-chartjs';
const { reactiveProp } = mixins;

export default {
  extends: Doughnut,
  mixins: [reactiveProp],
  props: ['options'],
  mounted() {
    this.renderChart(this.chartData, this.options);
  },
};

MyDoughnutChart.vue

item.index でデータに対する index が取得でき、データそのものは chart.datasets[n].data[item.index] でアクセス可能。

今回は値が 0 のものがあれば除去している。(グラフにも表示されないので)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<template>
  <div>
    <MyDoughnutChart :chart-data="datacollection" :options="options" />
  </div>
</template>

<script>
import MyDoughnutChart from '@/components/MyDoughnutChart.js';

export default {
  components: {
    MyDoughnutChart,
  },
  data() {
    return {
      datacollection: {},
      options: {
        legend: {
          labels: {
            filter: (item, chart) => {
              const value = chart.datasets[0].data[item.index];
              if (value === 0) {
                return false;
              }
              return true;
            },
          },
        },
      },
    };
  },
  mounted() {
    this.fillData();
  },
  methods: {
    fillData() {
      const data = [10, 0, 20];
      const labels = ['red', 'green', 'blue'];
      const backgroundColor = ['red', 'green', 'blue'];
      this.datacollection = {
        datasets: [
          {
            data,
            backgroundColor,
          },
        ],
        labels,
      };
    },
  },
};
</script>

描画結果

ちなみに options.legend.labels.filter を設定しない場合はこうなる。

まとめ

  • options.legend.labels.filter で設定
    • item.index や chart.datasets[n].data[item.index] を見て 表示/非表示 を決定
    • return true で表示、return false で非表示

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list