Area charts fill the region between a line and the axis baseline, emphasizing the magnitude of values over time. They excel at showing cumulative totals, part-to-whole relationships across time, and the visual weight of overlapping trends.

Subtype

▾

Live Preview

month	sales
Jan	34200
Feb	29800
Mar	42100
Apr	51600
May	48300
Jun	58900
Jul	63200
Aug	61400
Sep	70100
Oct	75800

{
  "title": {
    "text": "Monthly Sales Volume 2025"
  },
  "data": [
    {
      "month": "Jan",
      "sales": 34200
    },
    {
      "month": "Feb",
      "sales": 29800
    },
    {
      "month": "Mar",
      "sales": 42100
    },
    {
      "month": "Apr",
      "sales": 51600
    },
    {
      "month": "May",
      "sales": 48300
    },
    {
      "month": "Jun",
      "sales": 58900
    },
    {
      "month": "Jul",
      "sales": 63200
    },
    {
      "month": "Aug",
      "sales": 61400
    },
    {
      "month": "Sep",
      "sales": 70100
    },
    {
      "month": "Oct",
      "sales": 75800
    },
    {
      "month": "Nov",
      "sales": 88400
    },
    {
      "month": "Dec",
      "sales": 102300
    }
  ],
  "series": [
    {
      "type": "area",
      "xKey": "month",
      "yKey": "sales",
      "fill": "#6366f1",
      "fillOpacity": 0.35,
      "stroke": "#6366f1",
      "strokeWidth": 2
    }
  ],
  "axes": [
    {
      "position": "bottom",
      "title": {
        "text": "Month"
      }
    },
    {
      "position": "left",
      "title": {
        "text": "Sales ($)"
      }
    }
  ],
  "legend": {
    "enabled": false
  }
}

Edit JSON above · auto-previews after 0.9 s

A single filled area chart showing cumulative sales volume over twelve months.

PreviousLine Charts Next Radar Charts

Was this article helpful?