diff --git a/cms/jinja2/templates/datavis/_macro.njk b/cms/jinja2/templates/datavis/_macro.njk
index ed5452df..e438c9a9 100644
--- a/cms/jinja2/templates/datavis/_macro.njk
+++ b/cms/jinja2/templates/datavis/_macro.njk
@@ -1,24 +1,22 @@
 {% macro onsChart(params) %}
-    <div data-highcharts-base-chart data-highcharts-type="{{ params.chartType }}" data-highcharts-theme="{{ params.theme }}" data-highcharts-title="{{ params.title }}" {% if params.use_stacked_layout %}data-highcharts-use-stacked-layout{% endif %}>
-        <figure id="{{ params.domId }}">
+    <div
+        data-highcharts-base-chart
+        data-highcharts-type="{{ params.chartType }}"
+        data-highcharts-theme="{{ params.theme }}"
+        data-highcharts-title="{{ params.title }}"
+        data-highcharts-uuid="{{ params.uuid }}"
+        {% if params.use_stacked_layout %}data-highcharts-use-stacked-layout{% endif %}
+    >
+        <figure>
             {# Heading levels will need to be configurable depending on page surroundings #}
             <h3>{{ params.title }}</h3>
             <h4>{{ params.subtitle }}</h4>
-            <div data-highcharts-chart data-highcharts-id="{{ params.uuid }}"></div>
+            <div data-highcharts-chart></div>
             {% if params.caption %}
                 <figcaption>{{ params.caption }}</figcaption>
             {% endif %}
         </figure>
 
-        <!-- Set scripts to pass the config and annotations values as json to the javascript -->
-        {% set config_scriptid = ["config--", params.uuid] | join %}
-        {{ params.config|json_script(config_scriptid) }}
-
-        {% if params.annotations_values %}
-            {% set annotations_values_scriptid = ["annotations-values--", params.uuid] | join %}
-            {{ params.annotations_values|json_script(annotations_values_scriptid) }}
-        {% endif %}
-
         {% if params.download_title and (params.download_image or params.download_csv or params.download_excel) %}
             {% if params.download_title %}<h4>{{ params.download_title }}</h4>{% endif %}
             <ol>
@@ -33,5 +31,17 @@
                 {% endif %}
             </ol>
         {% endif %}
+
+        {# script tags to pass json data to the javascript component #}
+        <script type="application/json" data-highcharts-config="{{ params.uuid }}">
+            {# Note that in the design system this will need to be a custom filter #}
+            {{ params.config|tojson }}
+        </script>
+        {% if params.annotations_values %}
+            <script type="application/json" data-highcharts-annotations-values="{{ params.uuid }}">
+                {# Note that in the design system will may need to be a custom filter #}
+                {{ params.annotations_values|tojson }}
+            </script>
+        {% endif %}
     </div>
 {% endmacro %}
diff --git a/cms/static_src/javascript/components/highcharts-base-chart.js b/cms/static_src/javascript/components/highcharts-base-chart.js
index 407ac25f..18767579 100644
--- a/cms/static_src/javascript/components/highcharts-base-chart.js
+++ b/cms/static_src/javascript/components/highcharts-base-chart.js
@@ -16,13 +16,16 @@ class HighchartsBaseChart {
     this.title = this.node.dataset.highchartsTitle;
     this.useStackedLayout = this.node.hasAttribute('data-highcharts-use-stacked-layout');
     const chartNode = this.node.querySelector('[data-highcharts-chart]');
-    const chartId = chartNode.dataset.highchartsId;
     // We start with some config in the correct Highcharts format supplied by Wagtail
     // This gets some further modifications
-    this.apiConfig = JSON.parse(this.node.querySelector(`#config--${chartId}`).textContent);
-    if (this.node.querySelector(`#annotations-values--${chartId}`)) {
+    this.uuid = this.node.dataset.highchartsUuid;
+
+    this.apiConfig = JSON.parse(
+      this.node.querySelector(`[data-highcharts-config="${this.uuid}"]`).textContent,
+    );
+    if (this.node.querySelector(`[data-highcharts-annotations-values="${this.uuid}"]`)) {
       this.annotationsValues = JSON.parse(
-        this.node.querySelector(`#annotations-values--${chartId}`).textContent,
+        this.node.querySelector(`[data-highcharts-annotations-values="${this.uuid}"]`).textContent,
       );
     }
 
@@ -48,7 +51,7 @@ class HighchartsBaseChart {
     // Will only run once per page load
     this.setCommonChartOptions();
 
-    // Configure any annotations that have been specified
+    // Configure any annotations that have been specified (will be an empty array if no annotations are specified)
     if (this.annotationsValues) {
       this.configureAnnotations();
     }