Отфильтруйте легенду, используя пользовательскую кнопку вне холста в vuechart

Question

У меня в приложении vue более одной диаграммы на одной странице ( vue-chartjs ).Что мне нужно сделать, так это то, что, нажав на одну кнопку за пределами этого холста, мне нужно изменить вид диаграммы.Как и при нажатии на ярлык, мы можем скрыть одну легенду и снова щелкнуть по ярлыку, чтобы показать эту легенду.

В моем случае у меня есть страница администратора.Там у меня есть два типа платежей от пользователя.Один для звонков, а другой наклейки.Предположим, если у меня есть 3 пользователя в этом разделе, будет три графика.И метка будет выглядеть так:

• Звонки
• Стикеры

Когда я нажимаю на метки на каждом графике, он показывает только нажатый. Это прекрасно работает .Но чего мне нужно добиться, так это того, что у меня есть две кнопки вне холста, а именно:

• Показать вызовы
• Показать стикеры

При нажатии Показать вызовы , мне нужно показать только Вызовы метка для все три графика .И наоборот.

Обновление 1

Это один пример, который я создал.

Две кнопки, расположенные сверху, теперь статичны, они должны быть динамическими.Это следует из метки легенды нижеприведенного графика.И цвет должен быть таким же, как на этикетке грпа.Теперь, нажав на регистрационную метку, она скрывает изображение соответствующей.Но мне нужно скрыть все графические изображения от 3 графиков, когда я нажимаю на кнопку «Регистрация»

my show-chart.vue

<template>
          <chart :chart-data="datacollection" :styles="myStyles"></chart>
</template>
<script>
import Chart from "./../Chart.js";
export default {
  components: {
    Chart
  },
  data() {
    return {
      datacollection: null
    };
  },
  mounted() {
    this.fillData();
  },
  methods: {
    fillData() {
      this.datacollection = {
        labels: [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December"
        ],
        datasets: [
          {
            label: "Registrations",
            backgroundColor: "#42b983",
            data: [70, 20, 12, 39, 100, 40, 95, 80, 80, 20, 12, 101]
          },
          {
            label: "Incomes",
            backgroundColor: "#7952b3",
            data: [205, 408, 188, 190, 58, 200, 190, 400, 164, 254, 290, 201]
          }
        ]
      };
    },
  },
 computed: {
myStyles () {
  return {
    height: `500px`,
    width: `350px`,
  }
}
 }
  };
</script>
<style>
</style>

мой app.vue содержит,

    <b-button variant="success">Registrations</b-button>

    <b-button variant="success">Incomes</b-button>

    <b-container class="bv-example-row">
      <b-row>
        <b-col>
         <visualisation></visualisation>
        </b-col>
        <b-col>
          <visualisation></visualisation>
        </b-col>
        <b-col>
          <visualisation></visualisation>
        </b-col>
      </b-row>
    </b-container>