Bar and line charts are a great way to show data visually. You can use them to show how data changes over time, or compare different sets of data with each other. Retool provides bar and line chart components so you can quickly and easily display data.

The Bar Chart and Line Chart components are listed under the Data Display heading in the components menu.

Add a Bar Chart / Line Chart to your canvas

To add a bar or line chart, drag a Bar Chart or Line Chart into your canvas.

Customize chart labels

Chart labels can be customized using the component properties menu.

1. Change the x-axis label using the X Axis Label field. The chart will automatically update as you type.

2. Change the y-axis label using the X Axis Label field. The chart will automatically update as you type.

3. Change the horizontal bar labels by modifying the array in the Labels field. These labels tell users how your data is grouped. In this example the labels ["Jan", "Feb", "Mar", "Apr"] show that the data is grouped by month.

📘

Note

Labels with strings must be encapsulated with quotes, whereas labels with numbers do not. For example ["Jan", "Feb", "Mar", "Apr"] and [1, 2, 3, 4]

Customize series data

Retool enables you to customize the series name, values, and color.

The chart auto-populates with a default series named dataset1. Customization for the dataset is located in the properties menu under Data Sets.

1. To customize the label for a series, update the Series label field. The label on the chart will automatically update as you type.

2. To customize the values for your data, modify the array in the Values field. In this example, the values [1, 4, 9, 16] show how many active users there are for each month (Jan - Apr).

📘

Note

You can also use references to existing queries. For example {{query1.data}}.

3. Customize the color of your series by entering a hex color value into the Color properties box. You can use standard CSS hex values or common names such as blue.

Add a new series

To add a new series, click the Add Series button located at the end of the Data Sets properties.

This will create a new data set, using a different default color than your existing datasets. Continue customizing this data set following the same steps as Customize chart labels.

Remove a series

To remove a series, click the Remove series button at the bottom of the data set properties of the series you want removed.

🚧

Note

When you remove a series from a chart, it can only be retrieved by going to your app History.