Docs › Chart types

Area chart

Volume and totals: areas, stacked and 100% stacked.

type: 'area' fills under the line with a soft gradient (gradient: false turns it off), and its y axis always starts at zero. Use stacked: true when the total matters and stacked: 'percent' when the shares do.

Live example

Code for this example

createChart('#chart', {
  type: 'area',
  title: 'Visits by source',
  stacked: true,
  data: {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    series: [
      { name: 'Search', data: [5200, 5600, 5900, 6100, 5800, 4200, 3900] },
      { name: 'Social', data: [2100, 2300, 2600, 2400, 2900, 3800, 4100] },
      { name: 'Direct', data: [1400, 1500, 1450, 1600, 1550, 1100, 980] },
    ],
  },
});

100% stacked

Each x adds up to 100. The tooltip shows the share and the original value.

Live example

Code for this example

createChart('#chart', {
  type: 'area',
  title: 'Device share',
  stacked: 'percent',
  data: {
    labels: ['2026-05', '2026-06', '2026-07', '2026-08', '2026-09', '2026-10'],
    series: [
      { name: 'Phone', data: [61, 63, 64, 66, 67, 69] },
      { name: 'Desktop', data: [33, 31, 31, 29, 28, 26] },
      { name: 'Tablet', data: [6, 6, 5, 5, 5, 5] },
    ],
  },
});