Multiple charts on one page

Expected Behavior

Interacting with a chart will only affect that specific chart

Actual Behavior

Interacting with a chart affects all charts on a page

Environment

• vue.js version: vue@2.6.11
• vue-chart.js version: vue-chartjs@3.5.0
• chart.js version: chart.js@2.9.3
• npm version: 6.14.7

Here is the code for my chart component:

<script>
import { mixins, Bar } from "vue-chartjs"; // We specify what type of chart we want from vue-chartjs and the mixins module
const { reactiveProp } = mixins;
export default {
  extends: Bar, //We are extending the base chart class as mentioned above
  mixins: [reactiveProp],
  props: {
    chartdata: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      options: {
        responsive: true,
        animation: {
          duration: 0,
        },
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true,
                stepSize: 1,
                min: 0,
                max: 100,
                maxTicksLimit: 5
              },
            },
          ],
        },
      },
    };
  },
 mounted() {
    this.renderChart(this.chartData, this.options);
  },
};
</script>

Here is the code for the page I’m rendering them on: https://github.com/SelfhostedPro/Yacht/blob/master/frontend/src/views/Home.vue (I would paste it but it’s quite long)

[croftman]

Did you try to add a unique ID on the chart? You can use the chartId prop, by default multiple charts on the same page have same id

[apertureless]

Well, its hard to reproduce. Multiple charts can be controlled tho: https://codesandbox.io/s/boring-thompson-ddl5g?file=/src/App.vue