How to Create Charts and Graphs in Retool

From the component panel on the left, find 'Chart' and drag it onto your canvas. Resize it to a comfortable width — a full-width chart works well for trend lines, while half-width charts suit comparison bar charts. The component shows a placeholder with sample data until you connect a data source. Click the Chart to open its Inspector panel on the right.

In the Chart Inspector, find the 'Data source' field under the General section. Set it to {{ query1.data }} — replace 'query1' with your actual query name. The Chart expects the data to be an array of objects (which is the standard format Retool SQL queries return). Once connected, if Retool can detect numeric and date/string columns, it will attempt to auto-configure the chart. You may see a rough chart appear immediately.

1// Example query returning chart-ready data:
2// SELECT month, revenue, expenses FROM monthly_summary ORDER BY month;
3// Access as: {{ monthlyData.data }}

In the Inspector, set the X axis to the column that should be on the horizontal axis — typically a date, month name, or category string. Click '+ Add series' to configure the Y axis. Set the 'Y column' to a numeric column like 'revenue'. Set the Series type to 'Line', 'Bar', 'Scatter', or 'Area'. Set a Label for the series (shown in the legend). Add a second series for a comparison metric: click '+ Add series' again and set Y column to 'expenses'. Both metrics will appear on the same chart.

1// Chart Inspector configuration (pseudocode):
2// X axis column: 'month'
3// Series 1 — Y column: 'revenue', Type: Line, Label: 'Revenue'
4// Series 2 — Y column: 'expenses', Type: Line, Label: 'Expenses'

If your query returns raw transaction rows (not pre-aggregated), enable Group By in the Chart Inspector. Set 'Group by' to a category column (e.g., 'product_category'). Set 'Aggregate' to SUM or COUNT. Set the Y column to 'amount'. Retool will aggregate all rows with the same category value and display one bar per category — no SQL GROUP BY required. This is ideal for ad-hoc exploration when you don't want to modify the underlying query.

In the Series configuration, change the Type dropdown to see all available types: Line, Bar, Area, Scatter, Pie, Donut, Histogram. For a Pie or Donut chart, only one series is used — set the 'Labels column' to a category column and 'Values column' to a numeric column. In the Axes section, set axis titles, number format (e.g., '$,.0f' for currency), and enable/disable gridlines. Under Colors, customize the series colors.

Add a Select dropdown component above the chart. Populate it with options (e.g., '7 days', '30 days', '90 days') as static values. In your chart's underlying query, add a WHERE clause that references the dropdown: WHERE created_at >= NOW() - INTERVAL '{{ select1.value }}'. Enable 'Run when inputs change' on the query. Now when the user changes the dropdown, the query re-runs and the chart updates. You can also reference multiple filter components for multi-dimensional filtering.

1-- Query with dynamic time filter
2SELECT
3  DATE_TRUNC('day', created_at) AS day,
4  SUM(amount) AS revenue
5FROM orders
6WHERE created_at >= NOW() - INTERVAL {{ select1.value + ' days' }}
7GROUP BY 1
8ORDER BY 1;