Automate chart creation with Chart Maker (no code)

QuickChart is a no-code solution to automatic chart generation. Create a chart template using the chart maker interface. Then use the template endpoint to customize and generate charts automatically.

In this guide, you will learn how to:

  1. Create and customize a chart template without any code.
  2. Save the chart as a URL (API endpoint) that you can use in emails, Excel, Salesforce, and any other formats.
  3. Set the chart’s data by providing special parameters in the URL.

Create a chart template

To create charts online, first go to the chart maker. Use the interface to build a chart template. This chart will be the basis of the charts you generate automatically in the future.

Add data

To get started, add some dummy or example data. The chart preview will update so you can get an idea of how your visualization will work.

Enter data as comma-separated values (e.g. 10,20,30,40). Each data value maps to a label (e.g. Jan, Feb, Mar, Apr). Edit “Labels” at the top of the Data settings to change this mapping.

Edit labels and data on the left-hand side of the chart maker

Using coordinates

For more advanced use cases, you may provide your data as (x, y) coordinates.

An example of category-based coordinates: (Jan, 10), (Feb, 20), (Mar, 30), (Apr, 40). These coordinates will give you more power over how your line or scatter plot is displayed.

Numeric coordinates are also accepted: (1, 50), (10, 40), (12, 20), (8, 10). This format is most commonly used for scatter plots, and requires you to change your Axes to linear or logarithmic under settings. In this case, you should clear the “Labels” setting at the top of the Data settings - labels will be automatically generated.

Time series use coordinates too. For example: (2020-01-01, 50), (2020-03-15, 12), (2020-06-05, 40). To display time series, change the X-axis to time type and clear the “Labels” setting in Data settings, as labels will be generated automatically.

Customize look & feel

Now that your data is set, time to make the chart look however you want.

Close the data menu to customize your chart’s axes, ticks, legend, and its overall layout.

Customize the chart by expanding different sections

Looking for inspiration? Head over to the chart gallery - most examples are editable in the chart maker.

Save the template

Click Save as API Template in the top right.

You’ll be presented with an API endpoint. This is the base URL of your chart. If you go to it, you will see a chart image. The URL can be further customized to override properties of your chart.

Saving as an API template gives you an endpoint you can use to generate unlimited charts.

Use the no-code chart API

Currently, three aspects of your chart can be overriden with custom values:

  1. Chart title
  2. Dataset labels
  3. Data

These customizations are passed as URL parameters. For example, to override chart title, take the base URL and add the following:

https://quickchart.io/chart/render/zf-abc-123?title=New title

You can join URL parameters together using the & symbol. For example:

https://quickchart.io/chart/render/zf-abc-123?title=New title&labels=Q1,Q2,Q3,Q4

To override data, use data1, data2, data3, …, for each dataset on the chart.

For example, to override the first (primary) dataset:

https://quickchart.io/chart/render/zf-abc-123?data1=40,60,80,100

To override multiple datasets and the chart title:

https://quickchart.io/chart/render/zf-abc-123?data1=40,60,80,100&data2=5,6,7,8&title=Updated chart

Real example

We have the following chart endpoint:

https://quickchart.io/chart/render/9a560ba4-ab71-4d1e-89ea-ce4741e9d232

It looks like this:

Let’s override this chart’s title:

https://quickchart.io/chart/render/9a560ba4-ab71-4d1e-89ea-ce4741e9d232?title=Updated chart

And now let’s add some more data and labels to the chart. This will override the data but keep the same style of chart that I created in the chart maker:

https://quickchart.io/chart/render/9a560ba4-ab71-4d1e-89ea-ce4741e9d232?title=Updated chart&data1=50,60,80&labels=Jan,Feb,Mar

Advanced API features

If you are willing to dive into the JSON/Javascript configuration, get even more control over the apperance and behavior of your chart. See main API documentation for details.

Need help?

Feel free to contact me or contact support if you get stuck or have questions. We’ll get back to you quickly!


Ian Webster

About the author

Ian Webster is a software engineer and former Googler based in San Mateo, California. He has helped Google, NASA, and governments around the world improve their data pipelines and visualizations. In 2018, Ian created QuickChart, a collection of open-source APIs that support data visualization efforts.

Email · LinkedIn · Twitter