Area charts

Use area when filled magnitude matters. Multiple series stack by design, making area useful for totals and composition over an ordered dimension. Prefer a line chart when precise comparison between overlapping series matters more than volume.

Stacked composition

  1{
  2  "version": "2026-09-26",
  3  "config": {
  4    "version": "2026-09-26",
  5    "title": "Traffic by source",
  6    "type": "area",
  7    "category": {
  8      "field": "date",
  9      "scale": {
 10        "type": "utc"
 11      },
 12      "format": "%b %d"
 13    },
 14    "values": {
 15      "type": "long",
 16      "field": "visits",
 17      "series": {
 18        "field": "source",
 19        "domain": [
 20          "Organic",
 21          "Paid",
 22          "Direct"
 23        ]
 24      }
 25    },
 26    "valueAxis": {
 27      "title": "Visits"
 28    },
 29    "theme": "editorial"
 30  },
 31  "data": [
 32    {
 33      "date": "2026-03-01",
 34      "source": "Organic",
 35      "visits": 420
 36    },
 37    {
 38      "date": "2026-03-01",
 39      "source": "Paid",
 40      "visits": 230
 41    },
 42    {
 43      "date": "2026-03-01",
 44      "source": "Direct",
 45      "visits": 140
 46    },
 47    {
 48      "date": "2026-03-04",
 49      "source": "Organic",
 50      "visits": 470
 51    },
 52    {
 53      "date": "2026-03-04",
 54      "source": "Paid",
 55      "visits": 260
 56    },
 57    {
 58      "date": "2026-03-04",
 59      "source": "Direct",
 60      "visits": 130
 61    },
 62    {
 63      "date": "2026-03-08",
 64      "source": "Organic",
 65      "visits": 520
 66    },
 67    {
 68      "date": "2026-03-08",
 69      "source": "Paid",
 70      "visits": 250
 71    },
 72    {
 73      "date": "2026-03-08",
 74      "source": "Direct",
 75      "visits": 150
 76    },
 77    {
 78      "date": "2026-03-13",
 79      "source": "Organic",
 80      "visits": 560
 81    },
 82    {
 83      "date": "2026-03-13",
 84      "source": "Paid",
 85      "visits": 310
 86    },
 87    {
 88      "date": "2026-03-13",
 89      "source": "Direct",
 90      "visits": 170
 91    },
 92    {
 93      "date": "2026-03-19",
 94      "source": "Organic",
 95      "visits": 640
 96    },
 97    {
 98      "date": "2026-03-19",
 99      "source": "Paid",
100      "visits": 340
101    },
102    {
103      "date": "2026-03-19",
104      "source": "Direct",
105      "visits": 190
106    },
107    {
108      "date": "2026-03-26",
109      "source": "Organic",
110      "visits": 710
111    },
112    {
113      "date": "2026-03-26",
114      "source": "Paid",
115      "visits": 360
116    },
117    {
118      "date": "2026-03-26",
119      "source": "Direct",
120      "visits": 180
121    }
122  ],
123  "presentation": {
124    "background": "opaque",
125    "colorScheme": "system",
126    "systemFallback": "light"
127  }
128}

{
  "version": "2026-09-26",
  "config": {
    "version": "2026-09-26",
    "title": "Traffic by source",
    "type": "area",
    "category": {
      "field": "date",
      "scale": {
        "type": "utc"
      },
      "format": "%b %d"
    },
    "values": {
      "type": "long",
      "field": "visits",
      "series": {
        "field": "source",
        "domain": [
          "Organic",
          "Paid",
          "Direct"
        ]
      }
    },
    "valueAxis": {
      "title": "Visits"
    },
    "theme": "editorial"
  },
  "data": [
    {
      "date": "2026-03-01",
      "source": "Organic",
      "visits": 420
    },
    {
      "date": "2026-03-01",
      "source": "Paid",
      "visits": 230
    },
    {
      "date": "2026-03-01",
      "source": "Direct",
      "visits": 140
    },
    {
      "date": "2026-03-04",
      "source": "Organic",
      "visits": 470
    },
    {
      "date": "2026-03-04",
      "source": "Paid",
      "visits": 260
    },
    {
      "date": "2026-03-04",
      "source": "Direct",
      "visits": 130
    },
    {
      "date": "2026-03-08",
      "source": "Organic",
      "visits": 520
    },
    {
      "date": "2026-03-08",
      "source": "Paid",
      "visits": 250
    },
    {
      "date": "2026-03-08",
      "source": "Direct",
      "visits": 150
    },
    {
      "date": "2026-03-13",
      "source": "Organic",
      "visits": 560
    },
    {
      "date": "2026-03-13",
      "source": "Paid",
      "visits": 310
    },
    {
      "date": "2026-03-13",
      "source": "Direct",
      "visits": 170
    },
    {
      "date": "2026-03-19",
      "source": "Organic",
      "visits": 640
    },
    {
      "date": "2026-03-19",
      "source": "Paid",
      "visits": 340
    },
    {
      "date": "2026-03-19",
      "source": "Direct",
      "visits": 190
    },
    {
      "date": "2026-03-26",
      "source": "Organic",
      "visits": 710
    },
    {
      "date": "2026-03-26",
      "source": "Paid",
      "visits": 360
    },
    {
      "date": "2026-03-26",
      "source": "Direct",
      "visits": 180
    }
  ],
  "presentation": {
    "background": "opaque",
    "colorScheme": "system",
    "systemFallback": "light"
  }
}

Edit me!

The series order controls stack order, color identity, and end-label order. Use an explicit series order when that order is meaningful or must remain stable across updates.

Single area

A single-series area emphasizes cumulative magnitude or volume. Because the fill encodes distance from the baseline, the value scale stays linear and its inferred domain includes zero.

Do not use area to exaggerate small changes by clipping the baseline. An explicit compatible domain is preserved, but validation emits a warning when it excludes zero so the decision must be reviewed rather than hidden in theme behavior.

End labels

Area labels may sit at series ends or label all, ends, or extrema points. End labels may include series, value, and percent; point labels may include category/value semantics or read a dedicated field. Point labels sit above the area surface by default and may use position: "side". End labels are especially useful when a legend would force the reader to look back and forth.

{
  "labels": {
    "series": { "content": ["series", "value", "percent"] }
  }
}

Curve and stroke

Choose linear, monotone, or step. The curve defaults to the selected theme. Omit stroke to keep the area fill-only; set a positive stroke.width only when a stroke carries deliberate emphasis. The stroke follows the area color by default and traces the data boundary rather than the closing edges to the baseline; set stroke.color when the boundary needs an independent fixed color.

Draw one series as a line

line.series names series that are drawn as a line on the same value scale instead of as filled areas. Use it for a benchmark, a total, or a co-measure that deserves different visual weight.

{ "line": { "series": ["Active paying"], "curve": "monotone" } }

The named series leave the stack and read against the shared value axis; the rest keep their geometry. curve, stroke.width, points, and labels style the line and reuse the line vocabulary, while color still comes from the existing series channel, so the legend shows a line glyph for a promoted series and a filled swatch for the others.

series must name at least one member of the effective series domain and may not name every series – that intent is a line chart. Promotion needs an effective series and is unavailable on ranged filled areas and on percent-normalized arrangements, where a raw-value line against a 0–100% axis would be meaningless.

References and annotations

Area accepts fixed category reference lines and fixed or calculated value references. An annotation attached to a category and series resolves to that band's compiled stacked edge and follows legend filtering; { type: "coordinate", category, value } remains available for an exact position. A calculated value reference can follow visible legend state or retain all data.

Properties

Field	Type	Default	Description
`version`	"2026-09-26"	`–`	Required. The chart config version.
`type`	ChartType	`–`	Required. The chart family.
`title`	string	`–`	Chart title.
`subtitle`	string	`–`	Supporting text beneath the title.
`caption`	string	`–`	Caption below the chart for a source, methodology note, or date.
`accessibilityDescription`	string	`–`	Accessible description of the chart's meaning.
`headerAlign`	"start" \| "center" \| "end"	`theme default`	Horizontal alignment for the title and subtitle. Omit it to use the selected theme's alignment.
`locale`	string	`"en-US"`	Locale identifier accepted by JavaScript Intl and associated with the chart content, such as en, pl, or zh-Hant.
`theme`	ThemeName	`"editorial"`	One of 6 built-in themes.
`themeOverrides`	ThemeOverrides	`–`	Override individual theme properties.
`category`	CategoryRole	`–`	Required. Category field, scale, and format.
`values`	ValuesRole	`–`	Required. Long, wide, or count value roles.
`order`	CategoryOrder	`–`	Category ordering policy.
`arrangement`	{ type: "stacked"; normalization?: "percent" }	`stacked`	Stacked placement; percent normalization requires series values. Grouped placement is not supported.
`color`	CategoricalColor	`–`	Categorical color preferences.
`categoryAxis`	boolean \| AxisOptions	`–`	True shows the category axis, false hides it, and an options object shows it with those settings. Omit for defaults.
`plotBorder`	boolean	`theme default`	Full plot border, independent of axis visibility.
`valueAxis`	boolean \| AxisOptions	`–`	True shows the value axis, false hides it, and an options object shows it with those settings. Omit for defaults.
`annotations`	CartesianAnnotation[]	`–`	Positioned annotations.
`references`	CategoricalReference[]	`–`	Reference lines.
`curve`	"linear" \| "monotone" \| "step"	`theme default`	Area interpolation.
`stroke`	Stroke	`–`	Optional area boundary color and width.
`labels`	AreaLabels	`–`	Series-end and point labels.
`line`	PromotedLine	`–`	Draw named series as a line on the same value scale instead of bars or areas. "series" is a non-empty subset of the effective series domain and may not name every series; use type "line" for that. Unavailable on ranged bars and on percent-normalized arrangements.