diff --git a/app/javascript/dashboard/components/widgets/chart/HorizontalBarChart.js b/app/javascript/dashboard/components/widgets/chart/HorizontalBarChart.js
index c986c9507..340c78319 100644
--- a/app/javascript/dashboard/components/widgets/chart/HorizontalBarChart.js
+++ b/app/javascript/dashboard/components/widgets/chart/HorizontalBarChart.js
@@ -45,6 +45,14 @@ export default {
       default: () => {},
     },
   },
+  watch: {
+    collection() {
+      this.renderChart(this.collection, {
+        ...chartOptions,
+        ...this.chartOptions,
+      });
+    },
+  },
   mounted() {
     this.renderChart(this.collection, {
       ...chartOptions,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
index 9144e95c1..b1e03636c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
@@ -60,9 +60,9 @@ export default {
     chartData() {
       return {
         labels: ['Rating'],
-        datasets: CSAT_RATINGS.map((rating, index) => ({
+        datasets: CSAT_RATINGS.map(rating => ({
           label: rating.emoji,
-          data: [this.ratingPercentage[index + 1]],
+          data: [this.ratingPercentage[rating.value]],
           backgroundColor: rating.color,
         })),
       };