How to determine the height of an embedded Chartio dashboard

Embedding

If you would like to set the height of your frame to match the content provided by Chartio’s dashboard you can use the following:

Update the iframe src attribute with the “Example Usage URL” value from the dashboard’s embedding settings and save the HTML below in file with a .html extension. Then, open the file in a browser.

<html>
  <head>
    <title>Chartio Embedding Iframe Height Example</title>
    <script type="text/javascript">
      window.onload = () => {
        const iframe = document.querySelector('#chartio-embed-iframe');
        window.addEventListener('message', (message) => {
          if (message.origin !== 'https://embed.chartio.com') return;
          if (message.data && message.data.height) {
            iframe.height = message.data.height + 'px';
          }
        });
      };
    </script>
  </head>
  <body>
    <iframe id="chartio-embed-iframe" width="100%" src="Embed URL from Dashboard Settings">
  </body>
</html>

Related Embedding Help Articles

See more