diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index 1221bbe7ca1c90294b68af84d55db5471e45e05d..8677f9564cff3f507ba553c95f3755c1a159c43e 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/assets/src/scripts/components/hydrograph/index.js
@@ -266,7 +266,11 @@ const timeSeriesGraph = function (elem) {
.append('svg')
.attr('xmlns', 'http://www.w3.org/2000/svg')
.classed('hydrograph-svg', true)
- .call(link((elem, layout) => elem.attr('viewBox', `0 0 ${layout.width + layout.margin.left + layout.margin.right} ${layout.height + layout.margin.top + layout.margin.bottom}`), layoutSelector))
+ .call(link((elem, layout) => {
+ elem.attr('viewBox', `0 0 ${layout.width + layout.margin.left + layout.margin.right} ${layout.height + layout.margin.top + layout.margin.bottom}`);
+ elem.attr('width', layout.width);
+ elem.attr('height', layout.height);
+ }, layoutSelector))
.call(link(addSVGAccessibility, createStructuredSelector({
title: titleSelector,
description: descriptionSelector,
diff --git a/graph-server/src/renderer/index.js b/graph-server/src/renderer/index.js
index 0f4426c59c6ae5495b8f380a33715bb6c5b0ef61..92ebda3771e57b91463782b4b3a05cfd0a991f0f 100644
--- a/graph-server/src/renderer/index.js
+++ b/graph-server/src/renderer/index.js
@@ -40,7 +40,7 @@ const renderToRespone = function (res, {siteID, parameterCode, compare, renderer
</script>
</head>
<body>
- <div class="wdfn-component" data-component="hydrograph" data-options=${JSON.stringify(componentOptions)}>
+ <div class="wdfn-component" data-component="hydrograph" data-options='${JSON.stringify(componentOptions)}'>
<div class="graph-container"></div>
</div>
<script>