Publishing a chart from Google Sheets produces fixed-width result
A client has many Google spreadsheets containing data from which they have generated charts on new sheets within the workbook. I have provided code which enables them to publish the chart (which previously generated a
<script> element containing JSON), copypaste the published JSON into their CMS, and have the end result be a generated responsive
<iframe>. The chart’s
width option is changed on the fly to match the container, and the usual trick of reloading the chart when the browser is resized handles keeping it that way.
However, Google Sheets has been updated and the client’s new charts only have an option to publish as “Link” or “Embed”, where the latter is just an
<iframe> wrapped around the former. As the
<iframe> is published with a fixed width, I have updated my code to handle this alternative, changing the
width attribute of the iframe on the fly.
The problem is that the internal contents of this iframe are now completely generated by Google with a fixed width, rather than a width which matches the containing iframe (whose width I am setting).
I can’t reach into the iframe to modify the document from script, as it’s from a different domain. The original chart embedded in the spreadsheet is responsive (resizing the browser window containing the spreadsheet resizes the chart very nicely) but I cannot see any way to maintain that effect during publishing.
I could move everything out into script that directly uses the visualization API, but then it’s not using the client’s pre-generated charts (and it seems like every chart they produce is a different style/layout, which would be a maintenance nightmare).
So: how can I publish a pre-existing chart from a Google Sheets document, with the published result being responsive in the same way as the original chart?