Area Chart

{% area_chart
	data="demo.daily_orders"
	x="date"
	y="sum(total_sales)"
	date_grain="month"
/%}

Examples

Basic Usage

{% area_chart
	data="demo.daily_orders"
	x="date"
	y="sum(total_sales)"
	date_grain="month"
/%}

Area Chart with Series

{% area_chart
    data="demo.daily_orders"
    x="date"
    y="sum(total_sales)"
    series="category"
    date_grain="month"
/%}

Area Chart with Formatting

{% area_chart
    data="demo.daily_orders"
    x="date"
    y="sum(total_sales)"
    y_fmt="usd"
    title="Sales Over Time"
    subtitle="Monthly sales performance"
    date_grain="month"
/%}

100% Stacked Area Chart

{% area_chart
    data="demo.daily_orders"
    x="date"
    y="sum(total_sales)"
    series="category"
    stacked="100%"
    date_grain="month"
    title="Sales Distribution by Category"
/%}

Revenue by Day of Week

{% area_chart
    data="demo.daily_orders"
    x="date"
    y="sum(total_sales)"
    y_fmt="usd"
    date_grain="day of week"
    title="Revenue by Day of Week"
    subtitle="Weekday vs weekend sales patterns"
/%}

Seasonality Analysis (Month of Year)

{% area_chart
    data="demo.daily_orders"
    x="date"
    y="sum(total_sales)"
    y_fmt="usd"
    date_grain="month of year"
    title="Seasonality Analysis"
    subtitle="Sales patterns across months"
/%}

Quarterly Trends

{% area_chart
    data="demo.daily_orders"
    x="date"
    y="sum(total_sales)"
    y_fmt="usd"
    date_grain="quarter of year"
    title="Quarterly Performance"
    subtitle="Q1 through Q4 comparison"
/%}

Monthly Billing Cycle Patterns

{% area_chart
    data="demo.daily_orders"
    x="date"
    y="sum(total_sales)"
    y_fmt="usd"
    date_grain="day of month"
    title="Daily Revenue by Day of Month"
    subtitle="Identify billing cycle patterns"
/%}

Week Number Analysis

{% area_chart
    data="demo.daily_orders"
    x="date"
    y="sum(total_sales)"
    y_fmt="usd"
    date_grain="week of year"
    title="Revenue by Week of Year"
    subtitle="Weekly performance across the year"
/%}

Day of Year Analysis

{% area_chart
    data="demo.daily_orders"
    x="date"
    y="sum(total_sales)"
    y_fmt="usd"
    date_grain="day of year"
    title="Revenue by Day of Year"
    subtitle="Identify patterns across 365 days"
/%}

Area Chart with Gradient Fill

{% area_chart
    data="demo.daily_orders"
    x="date"
    y="sum(total_sales)"
    y_fmt="usd"
    date_grain="month"
    stacked=false
    area_options={
        gradient=true
    }
/%}

Attributes

string

Name of the table to query. Required unless every child series uses metric="..." — metric children resolve their own base from the metric view.

array

IDs of filters to apply to the query

options group

Filter data to a time period. date_range is an OBJECT with range (the period) and optionally date (which column to filter on when the table has more than one). Shape: date_range={ range="last 12 months" date="order_date" }. range accepts predefined values (last 7 days, month to date), dynamic patterns (Last 90 days), custom windows (2020-01-01 to 2023-03-01), or partial ranges (from 2020-01-01, until 2023-03-01). Pass a plain string for range — the whole object is NOT a string.Example:

date_range={
  range = "today"
  date = "string"
}

Attributes:

range: string - Time period to filter. Use presets like ‘last 7 days’, dynamic patterns like ‘Last 90 days’, custom ranges like ‘2020-01-01 to 2023-03-01’, or partial ranges like ‘from 2020-01-01’.
- Allowed values:
  - today
  - yesterday
  - last 7 days
  - last 30 days
  - last 3 months
  - last 6 months
  - last 12 months
  - previous week
  - previous month
  - previous quarter
  - previous year
  - this week
  - this month
  - this quarter
  - this year
  - next week
  - next month
  - next quarter
  - next year
  - week to date
  - month to date
  - quarter to date
  - year to date
  - all time
date: string - Date column to filter on. Required when the data has multiple date columns.

string

Bucket dates into a grain. Pass the raw date column as x and the chart truncates and groups for you. Temporal grains (day, week, month, quarter, year, hour) preserve the year — use for time-series. Seasonality grains (day of week, day of month, day of year, week of year, month of year, quarter of year) collapse across years — use for cyclical patterns like “which month sells most regardless of year”.Allowed values:

day
week
month
quarter
year
hour
day of week
day of month
day of year
week of year
month of year
quarter of year

string

default:"connect"

How to handle missing data points. “connect” auto-connects points (default), “gaps” shows visual breaks, “zero” fills with zeros.Allowed values:

connect
gaps
zero

string

Column name for x-axis. Required unless every child series uses metric="..." — metric children fall back to the metric view’s time column.

string

Format for x values and axis labels. See Value Formatting for available formats.

string

Format for y values and axis labels. See Value Formatting for available formats.

string

Format for y2 values and axis labels. See Value Formatting for available formats.

string

Column name for series grouping (applies to all series)

string

Column name for individual point labels displayed at the top of the tooltip

string

Title to display above the component

string

Subtitle to display below the title

string

Information tooltip text (can only be used with title). Displays an info icon next to the title.

string

URL to link the info text to (can only be used with info)

string

Create a custom link title for the info link, placed after the info text (can only be used with info_link)

number

Time in seconds between automatic data refreshes (minimum 30). Overrides the page-level auto-refresh setting for this component.

string

Custom SQL WHERE condition to apply to the query. For date filters, use date_range instead.

string

Custom SQL HAVING condition to apply to the query after GROUP BY

number

Maximum number of rows to return from the query. Note: When used with tables, limit will disable subtotals to prevent incomplete subtotal rows.

string

Column name(s) with optional direction (e.g. “column_name”, “column_name desc”)

string

Custom SQL QUALIFY condition to filter windowed results

number

Set the width of this component (in percent) relative to the page width

number

Set a fixed height for the chart in pixels

string

Link this chart to others sharing the same id, syncing their tooltips, axis-pointer, and zoom

string

Sort order for x-axis categories. Options: asc (alphabetical), desc (reverse alphabetical), data (preserve query order), or an array for custom order like ["A", "B", "C"]Allowed values:

asc
desc
data

options group

Configure the y-axisExample:

y_axis_options={
  title = "string"
  title_position = "top"
  ticks = true
  baseline = true
  labels = true
  gridlines = true
  min = 0
  max = 0
  fit_to_data = true
  interval = 0
}

Attributes:

title: string
title_position: string - Position of the axis title. “top” places it horizontally at the top, “side” places it vertically along the axis. Defaults to “side” for 100% stacked charts, “top” otherwise.
- Allowed values:
  - top
  - side
ticks: boolean
baseline: boolean
labels: boolean - Show/hide axis labels
gridlines: boolean - Show/hide gridlines
min: number - Minimum value for this axis (number for numeric axes, date string for date axes)
max: number - Maximum value for this axis (number for numeric axes, date string for date axes)
fit_to_data: boolean - Fit the axis to the data instead of including 0
interval: number - Interval between axis ticks for numeric axes. This option is a suggestion, the actual interval may differ.

options group

Configure the secondary y-axisExample:

y2_axis_options={
  title = "string"
  title_position = "top"
  ticks = true
  baseline = true
  labels = true
  gridlines = true
  min = 0
  max = 0
  fit_to_data = true
  interval = 0
}

Attributes:

title: string
title_position: string - Position of the axis title. “top” places it horizontally at the top, “side” places it vertically along the axis. Defaults to “side” for 100% stacked charts, “top” otherwise.
- Allowed values:
  - top
  - side
ticks: boolean
baseline: boolean
labels: boolean - Show/hide axis labels
gridlines: boolean - Show/hide gridlines
min: number - Minimum value for this axis (number for numeric axes, date string for date axes)
max: number - Maximum value for this axis (number for numeric axes, date string for date axes)
fit_to_data: boolean - Fit the axis to the data instead of including 0
interval: number - Interval between axis ticks for numeric axes. This option is a suggestion, the actual interval may differ.

options group

Configure the x-axisExample:

x_axis_options={
  title = "string"
  show_title = true
  label_wrap = true
  ticks = true
  baseline = true
  labels = true
  gridlines = true
  min = 0
  max = 0
  fit_to_data = true
  min_interval = "year"
  max_interval = "year"
  interval = 0
  label_rotate = 0
  title_arrow = true
  max_label_length = 0
}

Attributes:

title: string
show_title: boolean - When true, renders the auto-derived axis title (the x column name) below the chart. Ignored when title is set explicitly. Defaults to false — auto-derived column-name titles usually read as visual noise and the axis labels speak for themselves.
label_wrap: boolean
ticks: boolean
baseline: boolean
labels: boolean - Show/hide axis labels
gridlines: boolean - Show/hide gridlines
min: number - Minimum value for this axis (number for numeric axes, date string for date axes)
max: number - Maximum value for this axis (number for numeric axes, date string for date axes)
fit_to_data: boolean - Fit the axis to the data instead of including 0. Defaults to true for numeric x-axes, false otherwise.
min_interval: string - Minimum interval between axis ticks for time-based axes. This option is a suggestion, the actual interval may differ.
- Allowed values:
  - year
  - quarter
  - month
  - week
  - day
  - hour
max_interval: string - Maximum interval between axis ticks for time-based axes. This option is a suggestion, the actual interval may differ.
- Allowed values:
  - year
  - quarter
  - month
  - week
  - day
  - hour
interval: number - Interval between axis ticks for numeric axes. This option is a suggestion, the actual interval may differ.
label_rotate: number - Rotation angle of axis label in degrees. Positive values rotate clockwise, negative values rotate counter-clockwise.
title_arrow: boolean - Show/hide the arrow (→) on the axis title
max_label_length: number - Maximum character length for axis labels. Labels exceeding this length will be truncated with an ellipsis. Defaults to 20 characters when labels are rotated.

boolean

default:"true"

Show legend. Studio’s built-in legend renders a compact color swatch + series name. For chart-wide style overrides that need the legend to reflect them precisely (line width, custom symbols, richer styling), set legend=false and provide legend={ show=true ... } inside echarts_options to use ECharts’ native legend instead.

string

default:"top"

Position of the legend (top or bottom)Allowed values:

top
bottom

array

Array of series names to define the order of series in the chart and legend. Series not in the array will appear after the ordered ones.

options group

Studio-shaped chart styling shortcuts (palette, series colors, zoom, padding). For raw ECharts overrides, use echarts_options instead.Example:

chart_options={
  color_palette = ["#3b82f6", "#8b5cf6", "#ec4899"]
  series_colors = {
    "Series A" = "#3b82f6"
    "Series B" = "#10b981"
    "Series C" = "#f59e0b"
  }
  zoom = true
  top_padding = 0
}

Attributes:

color_palette: array of strings - Array of hex color codes to use for series colors
series_colors: map of key-value pairs - Map of series names to hex color codes for custom series coloring
zoom: boolean - Enables zoom by dragging on the chart area
top_padding: number - Additional padding (in px) above the chart area to prevent labels from being cut off

map

Raw ECharts options deep-merged over the chart’s final configuration. Use for anything the structured props do not expose — dataZoom, visualMap, graphic, tooltip styling, and so on. Partial overrides win key-by-key without clobbering Studio’s computed siblings. For per-series overrides, use echarts_series_options or the per-series echarts_options on a line/bar/etc. child.Example:

echarts_options={
    tooltip={ position="top" }
    dataZoom=[{ type="slider" }]
}

map

Raw ECharts series options deep-merged into every data series in the chart. Use when the same override should apply to all series. Skips reference lines/areas/points. For a single series, set echarts_options on the series child instead.Example:

echarts_series_options={
    itemStyle={ borderRadius=8 }
    markLine={ data=[{ type="average" }] }
}

string | array

Column name for y-axis

string | array

Semantic metric name(s) to display, from metrics/*.yaml. Use instead of the raw data/value/x/y attributes. Pass an array for multiple series (e.g. metric=["revenue", "orders"]).

string

Format for this series’ values. See Value Formatting for available formats.

Extra columns to include in the tooltip on hover. Each entry is { value, label?, fmt?, color_by_sign?, down_is_good? }. See the tooltip fields guide for examples.

options group

Label each point in the series with its valueExample:

data_labels={
  position = "above"
  fmt = "date"
  size = 0
  distance = 0
  rotate = 0
  color = "string"
  border_color = "string"
  show_overlap = true
}

Attributes:

position: string - Position the label relative to its data point
- Allowed values:
  - above
  - below
  - left
  - right
  - middle
fmt: string - Format the label value. Defaults to series or axis fmt.
- Allowed values: See Value Formatting for all available formats.
size: number - Font size in px
distance: number - How far the label is from the data point
rotate: number - Rotate each label (degrees)
color: string - Change the text color of the labels
border_color: string - Change the border color surrounding text labels, defaults to chart background
show_overlap: boolean - Show labels for every point even when they overlap

options group

Example:

options={
  step = "start"
  smooth = true
  gradient = true
}

Attributes:

step: string - Show a stepped line rather than a smooth line between points and control where the step happens (start, middle, or end)
- Allowed values:
  - start
  - middle
  - end
smooth: boolean
gradient: boolean - Apply a color-to-transparent gradient fill to the area, fading from the series color at the top to transparent at the bottom

boolean | string

default:"true"

Whether to stack the areas. Set to “100%” for percentage stacking where each area shows its proportion of the total.

string | array

Column name for secondary y-axis

options group

Example:

area_options={
  step = "start"
  smooth = true
  gradient = true
}

Attributes:

step: string - Show a stepped line rather than a smooth line between points and control where the step happens (start, middle, or end)
- Allowed values:
  - start
  - middle
  - end
smooth: boolean
gradient: boolean - Apply a color-to-transparent gradient fill to the area, fading from the series color at the top to transparent at the bottom

Get Started

Core Concepts

Features

MCP

CLI

Self Host

Warehouses

Evidence Warehouse

Components

Examples

Basic Usage

Area Chart with Series

Area Chart with Formatting

100% Stacked Area Chart

Revenue by Day of Week

Seasonality Analysis (Month of Year)

Quarterly Trends

Monthly Billing Cycle Patterns

Week Number Analysis

Day of Year Analysis

Area Chart with Gradient Fill

Attributes

Allowed Children

​Examples

​Basic Usage

​Area Chart with Series

​Area Chart with Formatting

​100% Stacked Area Chart

​Revenue by Day of Week

​Seasonality Analysis (Month of Year)

​Quarterly Trends

​Monthly Billing Cycle Patterns

​Week Number Analysis

​Day of Year Analysis

​Area Chart with Gradient Fill

​Attributes

​Allowed Children

Examples

Basic Usage

Area Chart with Series

Area Chart with Formatting

100% Stacked Area Chart

Revenue by Day of Week

Seasonality Analysis (Month of Year)

Quarterly Trends

Monthly Billing Cycle Patterns

Week Number Analysis

Day of Year Analysis

Area Chart with Gradient Fill

Attributes

Allowed Children