# Bootstrap 5 Area Chart

Area charts show how quantities change over time, with the area under each line filled. ApexCharts example for AdminKit PRO, in light and dark mode.

> This feature is only available in **AdminKit PRO**. [Learn more](/pricing/).

## ApexCharts example

`adminkit.apexcharts()` renders the chart and updates it when the [color mode](/bootstrap/docs/getting-started/dark-mode/#charts-and-maps) changes.

```html
<div id="apexcharts-area"></div>

<script>
var options = {
  chart: {
    height: 350,
    type: "area",
  },
  dataLabels: {
    enabled: false
  },
  stroke: {
    curve: "smooth"
  },
  series: [{
    name: "series1",
    data: [31, 40, 28, 51, 42, 109, 100]
  }, {
    name: "series2",
    data: [11, 32, 45, 32, 34, 52, 41]
  }],
  xaxis: {
    type: "datetime",
    categories: ["2026-09-19T00:00:00", "2026-09-19T01:30:00", "2026-09-19T02:30:00", "2026-09-19T03:30:00", "2026-09-19T04:30:00",
      "2026-09-19T05:30:00", "2026-09-19T06:30:00"
    ],
  },
  tooltip: {
    x: {
      format: "dd/MM/yy HH:mm"
    },
  }
}
adminkit.apexcharts("#apexcharts-area", function () {
  return options;
});
</script>
```

---

Canonical HTML page: https://adminkit.io/bootstrap/docs/charts/area-chart/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io