Chart Widgets

Overview

Chart widgets let you visualize time-series and category data with flexible bar, line, and area charts. Add a chart to any dashboard, connect metrics and dimensions, and customize every visual detail — chart type, stacking, legend, axis labels, and period grouping — from the Properties Panel on the right.

This guide covers all chart configuration options from basic setup to advanced formatting.

What's in this guide

1. 1Adding a Chart Widget
2. 2Selecting Metrics
3. 3Changing Chart Type
4. 4Adding a Dimension Breakdown
5. 5Grouping & Stacking
6. 6View Mode: Combined vs. Tabbed
7. 7Data Labels
8. 8Legend Options
9. 9Period Grouping
10. 10Axis Configuration
11. 11Data Limits

Setup guide

1. Adding a Chart Widget

Follow these steps to place your first chart on the dashboard.

1. 1Open your dashboard in edit mode. You'll see a toolbar docked at the bottom of the canvas with all available widget types.
2. 2Connect a data table. Click the Select a default data table dropdown in the header bar and choose your data source (for example, cross_channel_automated_recipe). Wait a moment for the list to load.
3. 3Click + Chart in the bottom toolbar. The Chart widget appears on the canvas and the Properties Panel slides in from the right automatically.
4. 4Add at least one metric. Expand the Data accordion in the Properties Panel, search for a metric (for example, Spend), and click it. The chart renders as soon as one metric is selected.

Note: The chart is created with the default title Performance Over Time. Rename it by clicking the title on the widget or via the Basics section in the Properties Panel.

2. Selecting Metrics

Metrics are the numeric columns you want to visualize. Each selected metric becomes a separate series on the chart.

1. 1Open the Data section. In the Properties Panel, click the Data accordion to expand it. A badge shows how many metrics are currently selected.
2. 2Search and click a metric. Type in the search box to filter by name, then click any metric to add it. It moves from Available to Selected instantly.
3. 3Add more metrics (optional). Repeat for each additional metric. Each one gets a distinct color in the legend.
4. 4Remove a metric. Click the metric name again or click the colored indicator on the left side of the metric row.

Note: Calculated metrics like ROAS or CTR operate on a different scale than raw values like Spend. When mixed on one chart, the chart may add a second Y-axis automatically.

3. Changing Chart Type

Each metric can independently use Bar, Line, or Area visualization. You can mix types on the same chart — for example, Spend as bars and CTR as a line.

1. 1Find the metric row in the Data section. Each selected metric shows a Bar / Line / Area toggle to the right of its name.
2. 2Click the desired type. The chart re-renders immediately. The active button is highlighted.

4. Adding a Dimension Breakdown

A dimension breakdown splits one metric into multiple series by a category column. For example, adding channel as a dimension shows separate series for Paid Search, Paid Social, Display, and Email.

1. 1Add a metric first. The breakdown picker only activates after at least one metric is selected.
2. 2Find the Dimension / Breakdown picker in the Data section. It appears as a dropdown below the metrics list, labeled Breakdown or Dimensions.
3. 3Select a dimension. The chart re-renders with one series per unique dimension value. The legend updates automatically.

Warning: High-cardinality dimensions like campaign_name can produce dozens of series, making the chart unreadable. Use the Series Limit setting in the Filters section to cap the number of series and group the rest into an Others bucket.

5. Grouping & Stacking

When you have multiple bar series, you can choose how they are arranged.

• Grouped (default): Bars for each series sit side by side within each time period. Makes it easy to compare individual values.
• Stacked: Bars are placed on top of each other. Useful for showing the cumulative total alongside the breakdown.

To change the mode: in the Data section, click the expand arrow on any metric row. The Bar Mode sub-section appears with Grouped and Stacked buttons. This control only appears when the metric type is set to Bar.

6. View Mode: Combined vs. Tabbed

View Mode controls whether all metrics share a single chart or are shown one at a time.

• Combined: All metrics are overlaid on one chart. Useful for comparing trends at a glance.
• Tabbed: Each metric gets its own tab. Clicking a tab switches the chart to that metric. Useful when metrics have very different scales or when you want a cleaner view.

Find the View Mode selector in the Basics section of the Properties Panel. It requires at least two metrics to be meaningful.

Troubleshooting

7. Data Labels

Data labels display the numeric value of each data point directly on the chart, so readers don't need to hover or consult the Y-axis.

• Toggle data labels on or off in the Layout section of the Properties Panel.
• Labels appear at the top of each bar or along the line/area series.
• For charts with many data points or closely spaced bars, consider leaving labels off to avoid clutter.

8. Legend Options

The legend identifies each series by color and name. You can control its position.

Find the Legend setting in the Layout section of the Properties Panel.

9. Period Grouping

Period grouping controls the time granularity of the X-axis. Choosing a coarser granularity aggregates data and reduces the number of bars or points.

Find the Period setting in the Data or Basics section of the Properties Panel.

10. Axis Configuration

Both the X-axis and Y-axis can be customized.

Y-axis

• Title: Add a label that describes the unit (for example, Spend (USD)).
• Min / Max: Set fixed bounds to prevent the chart from auto-scaling when values change.
• Format: Choose currency, percentage, or numeric formatting for axis tick labels.

X-axis

• Date format: Control how dates are displayed (for example, Jan 1 vs 01/01/2025).
• Label rotation: Rotate labels to prevent overlap on dense charts.

Find axis settings in the Layout section of the Properties Panel.

11. Data Limits

Chart widgets have the following constraints.

If your chart hits a limit, reduce the date range, use Period Grouping to aggregate data, or apply a Series Limit filter.