Skip to content

Generate charts with a template

Need to generate custom charts for multiple clients without writing code?

In this guide, we’ll walk through creating reusable chart templates and customizing them on the fly with URL parameters. These quick and easy custom charts are perfect for agencies and businesses managing multiple client reports.

In this guide, we’ll use an example of creating a quarterly Adwords keywords report for multiple clients.

Understanding the Workflow

The process consists of four main steps:

  1. Create a base template in InstaCharts
  2. Enable the template and get its URL
  3. Modify URL parameters to customize the chart for each client
  4. Send or share the customized template URL

Using a template allows you to maintain consistent branding and layout among your charts, update multiple charts quickly, and share charts via simple URLs.

Let’s get started!

Creating Your Base Template

Step 1: Prepare Your Default Chart Settings

Our quarterly template chart is set up and ready to go.
Our quarterly template chart is set up and ready to go.
  1. Select a dataset to base your template on. The dataset should be representative of the typical client data you want to chart.
  2. Upload the dataset to InstaCharts.
  3. Name the active chart something descriptive like “Quarterly Template” to remember which chart you used as a template.
  4. Edit this chart until it resembles the final chart that you’d like to send to your client. Choose a chart type, columns to plot, set the chart’s text, change the chart’s colors and add trend lines.

Step 2: Enable Templating

From the main toolbar, open the Share & Template Dialog. Click Template from the left sidebar, and toggle the template to on. This just turned your current chart into a template to use for chart generation.

Any changes made to the chart will be reflected in all the charts generated by this template.

Templates are currently turned off on the current chart. Toggle the template on to use the current chart as a template.
Templates are currently turned off on the current chart. Toggle the template on to use the current chart as a template.

Choose template type

There are 4 template types to choose from, each has a different base URL.

Copy the chosen template URL to your favorite editor to further refine it
Copy the chosen template URL to your favorite editor to further refine it

Under the Links tab, you can choose from:

  • Interactive Chart URL
  • Image URL

Under Embed in a webpage, you can choose from:

  • Interactive Chart Tag
  • Image Tag

You have two decisions to make here.

  1. Do I want to embed the chart into a webpage or send a link?
  2. Do I want to send an interactive chart or a static image?

Based on your decisions, copy the appropriate link. In our case, we are going to be sending a link to an interactive chart, so copy the first URL under the Links tab.

Interactive Chart Template URL
https://instacharts.io/app/template/share/902d4f6a-f2d9-4df8-b342-299f9566235a?x=[2023-10,2023-10,2023-10,2023-10,2023-09,2023-09,2023-09,2023-09,2023-06,2023-06,2023-06,2023-06,2023-03,2023-03,2023-03,2023-03]&y=[16280,13850,10850,13850,47280,40790,31950,41080,40410,35280,27340,34850,32280,28400,21050,27020]&z=[training shoes,workout shoes,basketball shoes,running shoes,training shoes,workout shoes,basketball shoes,running shoes,training shoes,workout shoes,basketball shoes,running shoes,training shoes,workout shoes,basketball shoes,running shoes]

Step 3: Modify URL parameters for each client

When we copied our chart template link above, the Test Data checkbox was checked under URL Customizations. This inserts up to 30 rows of data from the chart into the template URL, making it easier to enter in your own values.

Since our chart is a stacked bar chart, we need three axis worth of data. This is what’s currently in our URL:

x=[2023-10,2023-10,2023-10,2023-10,2023-09,2023-09,2023-09,2023-09,2023-06,2023-06,2023-06,2023-06,2023-03,2023-03,2023-03,2023-03]
y=[16280,13850,10850,13850,47280,40790,31950,41080,40410,35280,27340,34850,32280,28400,21050,27020]
z=[training shoes,workout shoes,basketball shoes,running shoes,training shoes,workout shoes,basketball shoes,running shoes,training shoes,workout shoes,basketball shoes,running shoes,training shoes,workout shoes,basketball shoes,running shoes]

Our new numbers for Q4 have come in, and we’ll need to update the params with the new values

x=[2023-10,2023-10,2023-10,2023-10,2023-09,2023-09,2023-09,2023-09,2023-06,2023-06,2023-06,2023-06,2023-03,2023-03,2023-03,2023-03]
y=[55110,46520,37520,47550,47280,40790,31950,41080,40410,35280,27340,34850,32280,28400,21050,27020]
z=[training shoes,workout shoes,basketball shoes,running shoes,training shoes,workout shoes,basketball shoes,running shoes,training shoes,workout shoes,basketball shoes,running shoes,training shoes,workout shoes,basketball shoes,running shoes]

We need to update the chart’s subtitle to mark that we’ve added new data

subtitle=As of Jan 1, 2025

Our client’s branding has a lot of blue in it, so we’ll change the chart colors to blue

colorScheme=darkblue

Putting together all of our changed url params (don’t forget to tie each param together with an ’&’), we get this as our shareable URL:

Interactive Chart Template URL
https://instacharts.io/app/template/share/902d4f6a-f2d9-4df8-b342-299f9566235a?x=[2023-10,2023-10,2023-10,2023-10,2023-09,2023-09,2023-09,2023-09,2023-06,2023-06,2023-06,2023-06,2023-03,2023-03,2023-03,2023-03]&y=[55110,46520,37520,47550,47280,40790,31950,41080,40410,35280,27340,34850,32280,28400,21050,27020]&z=[training shoes,workout shoes,basketball shoes,running shoes,training shoes,workout shoes,basketball shoes,running shoes,training shoes,workout shoes,basketball shoes,running shoes,training shoes,workout shoes,basketball shoes,running shoes]&colorScheme=darkblue&subtitle=As of Jan 1, 2025

Step 4: Send and Share

Our final report is ready to go!
Our final report is ready to go!

Send the completed link to a client, or embed it into an html report.

Next Steps

Now that you have learned how to make a basic template, read on to discover other powerful InstaCharts features:

Full Template Docs

How to use Data Transformations

How to Import data with Google Sheets

How to Share a Chart via a link