How to add charts

TeleportHQ has nine chart elements: Line, Bar, Pie, Doughnut, Area, Scatter, Radar, Polar Area and Bubble. Add one from Elements → Charts, then in the right panel's Chart Settings type your labels and values under Data, or click Bind to fill the chart from dynamic data. Set the title, legend and axes under Options. Charts work on websites and web apps alike. On the published site, Radar and Polar Area charts show as bar charts.

Add a chart#

1. On the canvas, select the container that should hold the chart.
2. In the left sidebar, click Elements, and make sure the Primitives tab is open.

3. In the Charts group, click a chart, for example Bar Chart. It's added with sample data and selected.

   

4. In the right panel, find Chart Settings. Under Chart Type, you can switch to another type, for example Line. Switching type resets the data and options to that type's sample, so choose the type first.

Enter your data#

1. Under Labels, type the categories, for example Jan, Feb, Mar. Click + to add a label.
2. Under Datasets, click a dataset to open it. In its name box, type a name, for example Cakes sold.
3. Under Values, type one number per label, for example 120, 95, 140. Click + to add a value.
4. Pick the dataset's Color.

To compare two series, for example "Cakes sold" and "Bread sold", click + next to Datasets. Scatter and Bubble charts have no labels: each value is a point with an x and a y (and r, the bubble's size, for Bubble).

Set the chart's title, legend and axes#

Under Options in the TeleportHQ Chart Settings:

• Title: switch to On and type the Title text, for example Monthly sales.
• Legend: switch it On or Off, and choose its Position: Top, Bottom, Left or Right.
• X Axis and Y Axis: show or hide each axis. They don't appear for Pie, Doughnut, Radar and Polar Area charts.

Fill a chart with dynamic data#

A TeleportHQ chart can take its data from a value instead of typed numbers. Click Bind next to Data and choose a value in the panel that opens. The button then reads Dynamic. The value must be shaped like a chart:

• labels: a list of category names, for example ["Jan", "Feb", "Mar"];
• datasets: a list of series, each with a label and a data list of numbers, and optionally backgroundColor and borderColor.

Click See how data should look like to open the Chart Data Structure window. It shows an example for each chart type, with a Copy button. You can also bind only Labels or only Datasets, each with its own Bind button.

A database table returns rows, not this shape. To chart a table, create a page state whose Source is Data source ("Populate from a database, API or file") and pick your database and its table. Then click the code button in the state's row (tooltip Edit mapping function) and turn the rows into labels and datasets with a short JavaScript function. Bind Data to that state. A REST API, a CSV file or a Google Sheet works the same way: pick what to read in the state's Read from field. See How to store and use values with States.

Check that it worked#

The chart on the canvas shows your labels, values and colors. With dynamic data, the panel says "Chart data is bound to a dynamic source. Edit the binding or switch to static data by removing the binding."

Troubleshooting#

The chart is empty after binding data The bound value doesn't have labels and datasets. Open See how data should look like and compare the shape.

My typed data disappeared Changing Chart Type replaces the data with the new type's sample. Click Undo above the canvas, set the type first, then enter your data.

My Radar or Polar Area chart is a bar chart on the live site The published site and the downloaded code draw Radar and Polar Area charts as bar charts over the same data, without their round axis settings. Only the editor's canvas shows them round. To get the same look everywhere, choose another Chart Type, for example Bar or Doughnut.

I can't remove a label, dataset or value Each chart keeps at least one label, one dataset and one value, so the last one has no remove button.

Good to know#

• Charts need no web app and no advanced feature.
• Style the chart's size and spacing like any element in the right panel. A new chart is 400 px tall; round charts (Pie, Doughnut, Radar, Polar Area) are also 400 px wide, the others take the full width.
• Downloaded code: charts are drawn by a React chart library, so they work on your published site and in the React and Next.js downloads, with Radar and Polar Area drawn as bars. The HTML, Vue, Nuxt and Angular downloads don't draw them, and the download window doesn't warn you. See How to download your site as code.
• Charts in the admin panel's dashboard are built the same way. See What is the admin panel?