How to Embed an Interactive Chart into Your Website

Adding interactive charts to your website can transform static data into engaging content that captivates your audience. Whether you’re running a blog, managing a business site, or building a data-driven application, embedded charts make complex information accessible and visually appealing.

In this guide, we’ll walk you through the process of embedding interactive charts into your website using InstaCharts.

Why Embed Interactive Charts?

Before we dive into the how-to, let’s consider why interactive charts are worth the effort. Unlike static images, interactive charts allow visitors to hover over data points, zoom in on specific periods, filter information, and explore the data on their own terms. This interactivity keeps visitors engaged longer and helps them understand your data more deeply.

Interactive charts are also responsive by default, meaning they’ll look great on desktop computers, tablets, and smartphones without any extra work on your part.

An example of an embedded donut chart

Creating Your Chart in InstaCharts

The first step is creating your chart in InstaCharts. Log in to your account and either create a new chart from scratch or select one you’ve already built.

(For more information on importing data and creating a chart, see our full guide on importing files.)

InstaCharts supports a wide variety of chart types including line charts, bar charts, pie charts, scatter plots, and more.

Once you’re satisfied with your chart’s appearance and the data it displays, you’re ready to generate the embed code.

Getting Your Embed Code

Embedding your InstaCharts visualization is straightforward:

Open the Share & Templates dialog Look for the “Share” button located in the top toolbar.

Copy the Embed Code. From the Share Chart tab, click on Embed in a webpage. InstaCharts will generate a snippet of HTML code. This code typically looks like an <iframe> tag with a unique URL pointing to your chart. Copy this code to your clipboard. Use the responsive tag if you want the chart to grow or shrink with the user’s screen size, or the iframe only embed tag for a fixed chart size on your webpage.

Customize the Embed (Optional). There are a few optional settings you can apply from the Settings tab. Choose which views should be included in your embed (the chart, the full dataset, or the aggregated data shown in the chart). You can also set a page title and whether to allow full screen access to the chart.

Adding the Chart to Your Website

The method for adding your chart depends on what platform you’re using:

For HTML Websites

If you’re working with raw HTML, simply paste the embed code wherever you want the chart to appear in your page’s code. Make sure you’re editing the HTML source rather than a visual editor. Change the height to a value that looks good on your webpage.

<iframe src='https://instacharts.io/app/embeds/9fd655d6-85b6-4947-9b63-cb5f89631e6a' 
     width="100%" height="600px" frameborder="0"
     style="border-radius:6px; border: 1px solid rgba(0, 0, 0, 0.1); background:white;">
</iframe>

For WordPress

In the WordPress block editor, add an “HTML” or “Custom HTML” block where you want your chart to appear, then paste the embed code into that block. If you’re using the classic editor, switch to the “Text” tab (not “Visual”) and paste the code there.

For Website Builders

Platforms like Wix, Squarespace, and Webflow typically have an “Embed Code” or “HTML” widget. Drag this widget to your desired location and paste your InstaCharts embed code into it.

Responsive Design Considerations

To ensure your chart looks good on all devices, consider using the Responsive Embed tag. This tag looks similar to the regular embed tag, but comes with extra javascript:

<iframe src='https://instacharts.io/app/embeds/9fd655d6-85b6-4947-9b63-cb5f89631e6a' 
     width="100%" height="600px" 
     style="border-radius:6px; border: 1px solid rgba(0, 0, 0, 0.1); background:white;" frameborder="0" onmousewheel="" data-responsive="1">
</iframe>
<script type="text/javascript">window.addEventListener("message",(function(e){let t=e.data,n="instacharts-height";if(t&&t[n]){let s=document.querySelectorAll("iframe");for(let o=0;o<s.length;o++){let a=s[o];a.contentWindow==e.source&&a.dataset.responsive&&(a.style.height=t[n]+"px",a.contentWindow.postMessage({"instacharts-no-scroll":1},"*"))}}}));</script>

This tag is a responsive container that uses CSS to maintain aspect ratios across different screen sizes.

Updating Your Embedded Charts

One of the best features of embedded charts is that they remain connected to your InstaCharts account. When you update the data or styling in your InstaCharts charts, those changes automatically reflect in all the places you’ve embedded that chart. There’s no need to generate new embed codes or update your website again.

Best Practices for Chart Embedding

Consider Page Load Times. While embedded charts are optimized, having too many on a single page can slow down load times. Be strategic about placement.

Test on Multiple Devices. Always check how your embedded chart appears on mobile devices, tablets, and desktops before publishing.

Provide Context. Add a caption or brief explanation near your chart to help readers understand what they’re looking at.

Mind Your Color Scheme. Ensure your chart colors complement your website’s design and maintain sufficient contrast for readability.

Troubleshooting Common Issues

If your chart isn’t displaying correctly, check these common issues:

• Make sure the chart is set to “Public” in your InstaCharts settings. Private charts won’t display on external websites.
• Verify you copied the complete embed code without accidentally cutting off any characters.
• Check if your website platform allows iframe embeds. Some platforms restrict iframes for security reasons.

Wrapping Up

Embedding interactive charts from InstaCharts into your website is a powerful way to communicate data effectively. With just a few clicks and a simple copy-paste operation, you can transform your website into an engaging, data-driven experience that keeps visitors coming back for more.

Ready to get started? Log in to your InstaCharts account and start creating charts that will make your website stand out from the crowd.