Embeddable charts for any website

Quickstart

Step 1 - Prepare your Data

Create a Google Sheet and set the sharing permissions to "anyone with the link can view." Add your data like below, with a header of labels and as many columns and rows as you'd like. (Your data may be single or multi-series.)

Step 2 - Create a Chart

Copy the Spreadsheet's ID from your browser URL bar. It comes after /spreadsheets/d/ and ends before the next / slash. For example, in the URL below the Sheet ID is 1_hbQgtLZw88XZZ0YNEWhzK57QD8B4qtlTQlGKOUKoIg.

https://docs.google.com/spreadsheets/d/1_hbQgtLZw88XZZ0YNEWhzK57QD8B4qtlTQlGKOUKoIg/edit#gid=0

Copy and paste this ID into the iFrame embed code below where it reads "xxxx", then input the type of graph you want after "chart_type=". We currently support line, bar, and pie charts (view demos).

<iframe width="100%" height="450px" src="https://chartfuse.co/chart/?sheet_id=xxxx&chart_type=bar"></iframe>

Step 3 - Embed your Chart

Paste the entire iFrame embed code from above (with your Sheet ID and chart type selection) into any web page. On blog platforms like WordPress or Ghost, simply choose the "HTML Block" or "Embed" feature in the rich text editor.

Congrats on making your content more interactive! For more help, see Advanced Features and Troubleshooting.

Chart Title

Append &title=your title here to the "src" URL attribute in the iFrame embed code. Example:

<iframe width="100%" src="https://chartfuse.co/chart/?sheet_id=xxxx&chart_type=bar&title=User Signups" height="450px"></iframe>

Legend Visibility

To hide the generated (+ clickable/interactive) legend from your graph, append &hide_legend=true to the "src" URL attribute in the iFrame embed code. Example:

<iframe width="100%" src="https://chartfuse.co/chart/?sheet_id=xxxx&chart_type=bar&hide_legend=true" height="450px"></iframe>

Custom Colors

To use your own color palette, append &colors=color,color,etc to the "src" URL attribute in the iFrame embed code. Each color should be comma-separated and may be a color's name (blue, black, etc) or hex code without the '#'. Example:

<iframe width="100%" src="https://chartfuse.co/chart/?sheet_id=xxxx&chart_type=bar&colors=black,5c459d,b02623" height="450px"></iframe>

Background Fill Color

To fill in the space beneath a line graph's series data, append &fill_color=color to the "src" URL attribute in the iFrame embed code. Example:

<iframe width="100%" src="https://chartfuse.co/chart/?sheet_id=xxxx&chart_type=line&colors=black&fill_color=a0c4c1" height="450px"></iframe>

See a live example of the 'fill_color' parameter here in the "Stories by Year" graph.

Loading Message

Pending the size of your dataset, it may take a few seconds for the chart to load on your webpage. To provide a customized loading message to your visitors, append &loading=Your message here to the "src" URL attribute in the iFrame embed code. Example:

<iframe width="100%" src="https://chartfuse.co/chart/?sheet_id=xxxx&chart_type=bar&loading=Just a sec, crunching data..." height="450px"></iframe>

Multi-Chart Support

To use a single Google Sheet for all your data across multiple charts and graphs, first put each chart's data in a unique spreadsheet Tab like below:

Then, when you prepare the iFrame embed code, simply append the tab's ID (in browser URL after #gid=) to the Sheet ID parameter via [tab-id-here] (include the open/close '[' and ']'). The example from Step 2 above becomes:

<iframe width="100%" height="450px" src="https://chartfuse.co/chart/?sheet_id=1_hbQgtLZw88XZZ0YNEWhzK57QD8B4qtlTQlGKOUKoIg[824877591]&chart_type=bar"></iframe>