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.
- Change the x-axis label using the X Axis Label field. The chart will automatically update as you type.




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




- 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.
- To customize the label for a series, update the Series label field. The label on the chart will automatically update as you type.




- 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}}
.




- 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.
Updated 10 months ago