diff --git a/src/components/charts/chart/chart.spec.js b/src/components/charts/chart/chart.spec.js
index cf1744c8af3adb4cb22c85f55c04450a07919db1..0093f67a5cdb73b16d9239880d5379cf63b4d4b9 100644
--- a/src/components/charts/chart/chart.spec.js
+++ b/src/components/charts/chart/chart.spec.js
@@ -104,42 +104,88 @@ describe('chart component', () => {
     expect(wrapper.vm.chart).toBeDefined();
   });
 
-  describe('sets chart options', () => {
-    beforeEach(async () => {
-      createWrapper({
-        options: {
-          title: { text: 'My chart title' },
-        },
+  describe('chart options', () => {
+    describe('when options are set', () => {
+      beforeEach(async () => {
+        createWrapper({
+          options: {
+            title: { text: 'My chart title' },
+          },
+        });
+        await nextTick();
       });
-      await nextTick();
-    });
 
-    it('inits chart options, adding aria.enabled', async () => {
-      expect(wrapper.vm.chart.setOption).toHaveBeenCalledTimes(1);
-      expect(wrapper.vm.chart.setOption).toHaveBeenCalledWith({
-        title: { text: 'My chart title' },
-        aria: { enabled: true },
+      it('inits chart options, adding aria.enabled', async () => {
+        expect(wrapper.vm.chart.setOption).toHaveBeenCalledTimes(1);
+        expect(wrapper.vm.chart.setOption).toHaveBeenCalledWith({
+          title: { text: 'My chart title' },
+          aria: { enabled: true },
+        });
+
+        expect(wrapper.emitted('updated').length).toEqual(1);
       });
 
-      expect(wrapper.emitted('updated').length).toEqual(1);
-    });
+      it('reacts to options changes by merging options', async () => {
+        wrapper.setProps({
+          options: {
+            title: { text: 'My new chart title' },
+            xAxis: { show: true },
+          },
+        });
+        await nextTick();
 
-    it('reacts to options changes by merging options', async () => {
-      wrapper.setProps({
-        options: {
+        expect(wrapper.vm.chart.setOption).toHaveBeenCalledTimes(2);
+        expect(wrapper.vm.chart.setOption).toHaveBeenLastCalledWith({
+          aria: { enabled: true },
           title: { text: 'My new chart title' },
           xAxis: { show: true },
-        },
+        });
+        expect(wrapper.emitted('updated').length).toEqual(2);
       });
-      await nextTick();
+    });
+
+    describe('when aria is explicitly disabled', () => {
+      it('does not enable aria', async () => {
+        createWrapper({
+          options: { aria: { enabled: false } },
+        });
+        await nextTick();
 
-      expect(wrapper.vm.chart.setOption).toHaveBeenCalledTimes(2);
-      expect(wrapper.vm.chart.setOption).toHaveBeenLastCalledWith({
-        title: { text: 'My new chart title' },
-        xAxis: { show: true },
-        aria: { enabled: true },
+        expect(wrapper.vm.chart.setOption).toHaveBeenCalledWith({
+          aria: { enabled: false },
+        });
+      });
+    });
+
+    describe('when toolbox is enabled', () => {
+      it('sets grid top to `toolboxHeight`', async () => {
+        createWrapper({
+          options: { toolbox: { show: true } },
+        });
+        await nextTick();
+
+        expect(wrapper.vm.chart.setOption).toHaveBeenCalledWith({
+          aria: { enabled: true },
+          toolbox: { show: true },
+          grid: { top: toolboxHeight },
+        });
+      });
+
+      it('increases grid top by `toolboxHeight`', async () => {
+        createWrapper({
+          options: {
+            toolbox: { show: true },
+            grid: { top: 100 },
+          },
+        });
+        await nextTick();
+
+        expect(wrapper.vm.chart.setOption).toHaveBeenCalledWith({
+          aria: { enabled: true },
+          toolbox: { show: true },
+          grid: { top: 100 + toolboxHeight },
+        });
       });
-      expect(wrapper.emitted('updated').length).toEqual(2);
     });
   });
 
@@ -206,18 +252,4 @@ describe('chart component', () => {
       });
     });
   });
-
-  describe('with toolbox in options', () => {
-    it('increases grid top by `toolboxHeight`', async () => {
-      const optionsWithToolbox = { toolbox: { show: true } };
-      wrapper = shallowMount(Chart, { propsData: { options: optionsWithToolbox } });
-      await nextTick();
-
-      expect(wrapper.vm.chart.setOption).toHaveBeenCalledWith({
-        ...optionsWithToolbox,
-        grid: { top: toolboxHeight },
-        aria: { enabled: true },
-      });
-    });
-  });
 });
diff --git a/src/components/charts/chart/chart.vue b/src/components/charts/chart/chart.vue
index c2e81dad29dfc6d3317db6f7a0b8e09c038b55f1..361d22ac81708e0a41064ae132e823c73a9ab1da 100644
--- a/src/components/charts/chart/chart.vue
+++ b/src/components/charts/chart/chart.vue
@@ -1,6 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import * as echarts from 'echarts';
+import merge from 'lodash/merge';
 import {
   defaultHeight,
   defaultWidth,
@@ -17,16 +18,6 @@ import { debounceByAnimationFrame } from '../../../utils/utils';
  */
 const sizeValidator = (size) => Number.isFinite(size) || size === 'auto' || size == null;
 
-const isChartWithToolbox = (options) => Boolean(options?.toolbox?.show);
-
-const increaseChartGridTop = (options, increaseBy) => ({
-  ...options,
-  grid: {
-    ...options.grid,
-    top: (options?.grid?.top || 0) + increaseBy,
-  },
-});
-
 export default {
   name: 'GlChart',
   directives: {
@@ -90,10 +81,21 @@ export default {
     };
   },
   computed: {
-    normalizedOptions() {
-      return isChartWithToolbox(this.options)
-        ? increaseChartGridTop(this.options, toolboxHeight)
-        : this.options;
+    modifiedOptions() {
+      let options = { ...this.options };
+
+      // Enable aria by default
+      if (options.aria?.enabled === undefined) {
+        options = merge({}, options, { aria: { enabled: true } });
+      }
+
+      // Add space at the top to fit the toolbox
+      if (options.toolbox?.show === true) {
+        const top = (options.grid?.top || 0) + toolboxHeight;
+        options = merge({}, options, { grid: { top } });
+      }
+
+      return options;
     },
   },
   watch: {
@@ -143,12 +145,7 @@ export default {
   },
   methods: {
     draw() {
-      this.chart.setOption({
-        ...this.normalizedOptions,
-        aria: {
-          enabled: true,
-        },
-      });
+      this.chart.setOption(this.modifiedOptions);
       /**
        * Emitted after calling `echarts.setOption`
        */
diff --git a/src/components/charts/column/__snapshots__/column_chart.spec.js.snap b/src/components/charts/column/__snapshots__/column_chart.spec.js.snap
index 6f16ad0299367d0fd0fa13b85938c71573991dc0..ceb8baad241bd43e78470ac7957bf816658d2129 100644
--- a/src/components/charts/column/__snapshots__/column_chart.spec.js.snap
+++ b/src/components/charts/column/__snapshots__/column_chart.spec.js.snap
@@ -2,9 +2,6 @@
 
 exports[`column chart component mounted should correctly render the chart 1`] = `
 Object {
-  "aria": Object {
-    "enabled": true,
-  },
   "grid": Object {
     "bottom": 44,
     "left": 64,
@@ -99,9 +96,6 @@ Object {
 
 exports[`column chart component with line data provided should correctly render the chart 1`] = `
 Object {
-  "aria": Object {
-    "enabled": true,
-  },
   "grid": Object {
     "bottom": 44,
     "left": 64,
@@ -190,9 +184,6 @@ Object {
 
 exports[`column chart component with secondary axis data provided should correctly render the chart 1`] = `
 Object {
-  "aria": Object {
-    "enabled": true,
-  },
   "grid": Object {
     "bottom": 44,
     "left": 64,
diff --git a/src/components/charts/stacked_column/__snapshots__/stacked_column.spec.js.snap b/src/components/charts/stacked_column/__snapshots__/stacked_column.spec.js.snap
index e8450d88b77033b8e9a1aec8621d29e97100e5c6..7fd15aa36a1159c8390ca946f04a169613c32a4d 100644
--- a/src/components/charts/stacked_column/__snapshots__/stacked_column.spec.js.snap
+++ b/src/components/charts/stacked_column/__snapshots__/stacked_column.spec.js.snap
@@ -2,9 +2,6 @@
 
 exports[`stacked column chart component color palette custom palette matches the snapshot 1`] = `
 Object {
-  "aria": Object {
-    "enabled": true,
-  },
   "grid": Object {
     "bottom": 44,
     "left": 64,
@@ -261,9 +258,6 @@ Object {
 
 exports[`stacked column chart component should correctly render the chart 1`] = `
 Object {
-  "aria": Object {
-    "enabled": true,
-  },
   "grid": Object {
     "bottom": 44,
     "left": 64,
@@ -520,9 +514,6 @@ Object {
 
 exports[`stacked column chart component with line data provided should correctly render the chart 1`] = `
 Object {
-  "aria": Object {
-    "enabled": true,
-  },
   "grid": Object {
     "bottom": 44,
     "left": 64,
@@ -628,9 +619,6 @@ Object {
 
 exports[`stacked column chart component with secondary axis data provided should correctly render the chart 1`] = `
 Object {
-  "aria": Object {
-    "enabled": true,
-  },
   "grid": Object {
     "bottom": 44,
     "left": 64,
diff --git a/src/utils/charts/config.js b/src/utils/charts/config.js
index eab3e9c521f95b67ddb1dfbb6a98f52eacfa0359..023deb5b999d586c400d0b116a84d7ec944eca23 100644
--- a/src/utils/charts/config.js
+++ b/src/utils/charts/config.js
@@ -46,9 +46,6 @@ export const defaultChartOptions = {
   grid,
   xAxis,
   yAxis,
-  aria: {
-    enabled: true,
-  },
 };
 
 export const gridWithSecondaryYAxis = {