Getting started with charts
Learn how to use your data to create charts and graphs.
This guide covers a set of new chart components, which are distinct from the legacy Chart component. The new chart components are available on Retool Cloud and on Self-hosted Retool version 3.111 and later.
Chart components allow you to visualize data as graphs and charts. There are various types of charts and graphs available, and each type offers customization options.
Retool also provides a Plotly JSON Chart that you can customize to fit your needs. All charts are built using Plotly.js version 2.34.
Chart types
Retool provides the following chart types:
- Bar Chart
- Bubble Chart
- Funnel Chart
- Heat Map
- Line Chart
- Mixed Chart
- Pie Chart
- Plotly JSON Chart
- Sankey Chart
- Scatter Chart
- Sparkline
- Stacked Bar Chart
- Sunburst Chart
- Treemap
- Waterfall Chart
Specify content options
In the Content section of the Inspector, add your data source. Series-based charts enable you to add one or more series, each with a different data source. Series-based charts include Bar Chart, Bubble Chart, Funnel Chart, Line Chart, Scatter Chart, Sparkline, and Waterfall Chart.
Choose your data
You can use queries, transformers, or JavaScript to build charts.
You can choose to manually add your data, or select a query or transformer in the Data source field, which automatically populates the chart with data.
Once you select the data source, you can choose what fields to display. Some charts have X data and Y data, and others have Labels and Values.

Group and aggregate data
Retool supports two transformation types:
- Group by: Group the data by a specific dimension.
- Aggregation: Summarize the y-values for a specific x-value.
These transformations are available for series-based charts only.
Group by
You can aggregate serial data for a dynamic number of groups. For example, you can create charts that visualize data over time and group that data, such as grouping revenue by product or headcount by team. Use the Group by property to choose a field from your data source to group and display this kind of data.
To see an example of this, create a JavaScript transformer using the code below, which represents a list of employee expenses. Make sure to save and run it before continuing.
const data = [
{ "Name": "David Wilson", "Category": "Travel", "Amount": 450.00, "Date": "2024-09-02" },
{ "Name": "Sarah Johnson", "Category": "Technology", "Amount": 475.00, "Date": "2024-09-05" },
{ "Name": "James Moore", "Category": "Meals", "Amount": 56.00, "Date": "2024-09-06" },
{ "Name": "Emily Davis", "Category": "Travel", "Amount": 300.00, "Date": "2024-09-11" },
{ "Name": "James Moore", "Category": "Travel", "Amount": 275.00, "Date": "2024-09-22" },
{ "Name": "Daniel Lee", "Category": "Meals", "Amount": 60.00, "Date": "2024-09-22" },
{ "Name": "Laura Taylor", "Category": "Technology", "Amount": 250.00, "Date": "2024-09-24" },
{ "Name": "James Moore", "Category": "Meals", "Amount": 45.00, "Date": "2024-09-30" },
{ "Name": "Laura Taylor", "Category": "Meals", "Amount": 85.00, "Date": "2024-09-31" }
];
return data;
Add a Line Chart component to the canvas. Select the primary series, and set the Data source to the transformer you created. Set the X data to Date
and the Y data to Amount
. Set Group by to Category
. The chart now shows three lines, one for each of the categories. If you add more data points to the transformer, the chart updates automatically.
