Skip to main content
{% combo_chart data="demo_daily_orders" x="date" date_grain="month" %}
    {% area y="sum(total_sales)" /%}
{% /combo_chart %}

​
Examples

​
Basic Area Series

{% combo_chart data="demo_daily_orders" x="date" date_grain="month" %}
    {% area y="sum(total_sales)" /%}
{% /combo_chart %}

​
Unstacked Areas

{% combo_chart data="demo_daily_orders" x="date" date_grain="month" %}
    {% area y="sum(total_sales)" series="category" stacked=false /%}
{% /combo_chart %}

​
Area with Gradient Fill

{% combo_chart data="demo_daily_orders" x="date" date_grain="month" %}
    {% area y="sum(total_sales)" stacked=false options={
        gradient=true
    } /%}
{% /combo_chart %}

​
Attributes

​
y
string
required
Column name for y-axis
​
series
string
Column name for series grouping
​
axis
string
default:"y1"
The axis to render the series onAllowed values:
  • y1
  • y2
​
fmt
string
Format for this series’ values. See Value Formatting for available formats.
​
data_labels
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.
  • 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
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
​
stacked
boolean | string
default:"true"
Whether to stack areas with the same series value. Set to “100%” for percentage stacking.
​
stack_id
string
Stack identifier - areas with the same stack_id value will be stacked together. Overrides the stacked prop.

​
Allowed Parents