Area Chart — Chart Controls

Minimal Example

{
  "id": "page-views",
  "type": "chart-area",
  "label": "Page Views Over Time",
  "width": "full",
  "settings": {
    "height": "300px",
    "binding": {
      "source": "$context",
      "path": "analytics.pageViews"
    }
  }
}

// Data shape (single series):
// [{ "label": "Week 1", "value": 4200 }, { "label": "Week 2", "value": 5100 }, ...]

Settings Reference

Setting	Type	Default	Description
`smooth`	boolean	false	Render smooth curved lines instead of straight segments
`stacked`	boolean	false	Stack areas on top of each other for cumulative totals
`fillOpacity`	number	0.4	Opacity of the filled area (0.0–1.0)
`gradient`	boolean	false	Apply a vertical gradient fade from opaque to transparent
`showPoints`	boolean	false	Show data point markers on the line boundary
`lineWidth`	number	2	Width of the line boundary in pixels
`series`	SeriesDef[]	—	Multi-series: `[{ key, label }]`
`labelKey`	string	`"label"`	Property name for the x-axis category label in multi-series data
`chartConfig.xAxis`	object	—	X axis settings: label, type, dateFormat
`chartConfig.yAxis`	object	—	Y axis settings: label, format, min, max

Stacked Area Chart

Stacked areas are ideal for showing how individual components contribute to a running total over time, such as traffic by channel or cost by category.

{
  "id": "traffic-by-channel",
  "type": "chart-area",
  "settings": {
    "height": "350px",
    "title": "Traffic by Channel",
    "stacked": true,
    "smooth": true,
    "fillOpacity": 0.6,
    "labelKey": "week",
    "series": [
      { "key": "organic",  "label": "Organic Search" },
      { "key": "paid",     "label": "Paid Ads" },
      { "key": "direct",   "label": "Direct" },
      { "key": "referral", "label": "Referral" }
    ],
    "chartConfig": {
      "yAxis": { "label": "Sessions", "format": "number" }
    },
    "binding": { "source": "$context", "path": "analytics.trafficByChannel" }
  }
}

// Data shape:
// [
//   { "week": "W1", "organic": 3200, "paid": 1800, "direct": 900, "referral": 400 },
//   { "week": "W2", "organic": 3400, "paid": 1950, "direct": 870, "referral": 420 }
// ]

Gradient Fill Area Chart

Enable gradient: true for a modern fade effect where the fill colour transitions from opaque at the top to transparent at the x-axis. Works best for single-series charts.

{
  "id": "revenue-trend",
  "type": "chart-area",
  "settings": {
    "height": "280px",
    "title": "Monthly Revenue",
    "smooth": true,
    "gradient": true,
    "fillOpacity": 0.7,
    "showPoints": true,
    "colors": ["#6c8cff"],
    "chartConfig": {
      "yAxis": { "label": "Revenue ($)", "format": "currency" },
      "xAxis": { "label": "Month" }
    },
    "binding": { "source": "$context", "path": "financials.monthlyRevenue" }
  }
}

Area vs Line — When to Use Each

Scenario	Area Chart	Line Chart
Single metric trend over time	Good — fill conveys magnitude	Good — clean, minimal
Cumulative / part-to-whole over time	Best — stacked mode	Possible but harder to read
5+ overlapping series	Avoid — fill obscures lower series	Better with distinct line styles
Emphasising volume	Best — fill draws the eye	Less effective
Reference lines / thresholds	Supported	Native referenceLines setting

Stacked vs Overlapping When stacked: false (the default) with multiple series, areas overlap. Use low fillOpacity (0.2–0.3) so hidden series remain visible. When stacked: true, areas are additive — ensure the y-axis max is set high enough to accommodate the sum.

Compact Sparkline-Style Area

Remove axes and legend for a compact sparkline-style area chart suitable for KPI cards:

{
  "id": "kpi-sparkline",
  "type": "chart-area",
  "settings": {
    "height": "80px",
    "smooth": true,
    "gradient": true,
    "fillOpacity": 0.5,
    "showPoints": false,
    "showLegend": false,
    "showTooltip": false,
    "colors": ["#22c55e"],
    "chartConfig": {
      "xAxis": { "show": false },
      "yAxis": { "show": false }
    },
    "binding": { "source": "$context", "path": "kpi.sparkline" }
  }
}

← Line Chart Next: Pie / Donut Chart →