fix morph

app/javascript/elements/bar_chart.js

@@ -1,7 +1,10 @@
 export default class extends HTMLElement {
-  static observedAttributes = ['data-labels', 'data-datasets']
-
   connectedCallback () {
+    this.id = `bar-chart-${Math.random().toString(32).split('.')[1]}`
+
+    this.chartLabels = JSON.parse(this.dataset.labels || '[]')
+    this.chartDatasets = JSON.parse(this.dataset.datasets || '[]')
+
     this.initChart()
   }
 
@@ -12,15 +15,6 @@ export default class extends HTMLElement {
     }
   }
 
-  attributeChangedCallback (_, oldValue, newValue) {
-    if (!this.chartInstance || oldValue === newValue) return
-
-    this.chartInstance.data.labels = JSON.parse(this.dataset.labels || '[]')
-    this.chartInstance.data.datasets = JSON.parse(this.dataset.datasets || '[]')
-
-    this.chartInstance.update()
-  }
-
   async initChart () {
     const { default: Chart } = await import(/* webpackChunkName: "chartjs" */ 'chart.js/auto')
 
@@ -31,8 +25,8 @@ export default class extends HTMLElement {
     this.chartInstance = new Chart(ctx, {
       type: 'bar',
       data: {
-        labels: JSON.parse(this.dataset.labels || '[]'),
-        datasets: JSON.parse(this.dataset.datasets || '[]')
+        labels: this.chartLabels,
+        datasets: this.chartDatasets
       },
       options: {
         responsive: true,