diff --git a/src/components/charts/chart/chart.spec.js b/src/components/charts/chart/chart.spec.js
index 0093f67a5cdb73b16d9239880d5379cf63b4d4b9..9f4423b4093303504b2f773155e29cf566ca1985 100644
--- a/src/components/charts/chart/chart.spec.js
+++ b/src/components/charts/chart/chart.spec.js
@@ -123,6 +123,7 @@ describe('chart component', () => {
         });
 
         expect(wrapper.emitted('updated').length).toEqual(1);
+        expect(wrapper.emitted('updated')[0][0]).toBe(mockChartInstance);
       });
 
       it('reacts to options changes by merging options', async () => {
@@ -141,6 +142,7 @@ describe('chart component', () => {
           xAxis: { show: true },
         });
         expect(wrapper.emitted('updated').length).toEqual(2);
+        expect(wrapper.emitted('updated')[1][0]).toBe(mockChartInstance);
       });
     });
 
diff --git a/src/components/charts/chart/chart.vue b/src/components/charts/chart/chart.vue
index 361d22ac81708e0a41064ae132e823c73a9ab1da..756a0ef4c3c6a5bbadbf98c119d183902d8e0575 100644
--- a/src/components/charts/chart/chart.vue
+++ b/src/components/charts/chart/chart.vue
@@ -13,7 +13,7 @@ import { GlResizeObserverDirective } from '../../../directives/resize_observer/r
 import { debounceByAnimationFrame } from '../../../utils/utils';
 
 /**
- * Allowed values by eCharts
+ * Allowed values by ECharts
  * https://echarts.apache.org/en/api.html#echartsInstance.resize
  */
 const sizeValidator = (size) => Number.isFinite(size) || size === 'auto' || size == null;
@@ -74,6 +74,7 @@ export default {
       default: true,
     },
   },
+  emits: ['created', 'updated', 'chartItemClicked'],
   data() {
     return {
       chart: null,
@@ -99,10 +100,11 @@ export default {
     },
   },
   watch: {
-    options() {
-      if (this.chart) {
+    modifiedOptions: {
+      handler() {
         this.draw();
-      }
+      },
+      deep: true,
     },
     width() {
       this.setChartSize();
@@ -145,11 +147,16 @@ export default {
   },
   methods: {
     draw() {
-      this.chart.setOption(this.modifiedOptions);
-      /**
-       * Emitted after calling `echarts.setOption`
-       */
-      this.$emit('updated', this.chart);
+      if (this.chart) {
+        this.chart.setOption(this.modifiedOptions);
+        /**
+         * Emitted when chart is updated via `echartsInstance.setOption`,
+         * emits the chart instance.
+         *
+         * @property {object} chart The chart instance (with updated options).
+         */
+        this.$emit('updated', this.chart);
+      }
     },
     setChartSize() {
       this.chart.resize({