# React Area Chart

A React area chart with ApexCharts in AdminKit PRO: smooth series on a time axis with filled areas, drawn by the ApexChart component in light and dark mode.

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

Use an area chart to show how a quantity changes over time, such as visits per hour. It is a line chart with the area under each line filled in.

In [AdminKit for React](/react/) you draw it with `ApexChart`, a React component around [ApexCharts](https://apexcharts.com/). Its `options` prop is a function of the theme colors, so the chart follows light and dark mode. [Chart setup](/react/docs/charts/overview/#apexcharts) explains how the component works.

## Example

```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>
```
```tsx code
import { ApexChart } from "@/components/plugins/apexcharts";

export function VisitsAreaChart() {
  return (
    <div className="position-relative" style={{ minHeight: 365 }}>
      <ApexChart
        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" } },
        })}
      />
    </div>
  );
}
```

Until the chart has drawn, a skeleton shows in its place. Give the `position-relative` element the height of the chart, so the skeleton takes the same space: the demo uses 365px for a 350px chart. The two series get the primary and success colors, the first two default colors of the wrapper.

Then render the component from a page in `src/routes/`. Each page loads with `React.lazy` when someone opens it, and needs an entry in `src/data/pages.json` (see [Add a page](/react/docs/getting-started/project-structure/#add-a-page)):

```tsx title="src/routes/analytics.tsx"
import { VisitsAreaChart } from "@/components/visits-area-chart";
import { PageTitle } from "@/components/ui/page-title";

export default function Page() {
  return (
    <>
      <PageTitle title="Analytics" />
      <div className="card">
        <div className="card-header">
          <h2 className="card-title mb-0">Visits</h2>
        </div>
        <div className="card-body">
          <VisitsAreaChart />
        </div>
      </div>
    </>
  );
}
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `options` | `(theme: Theme) => ApexOptions` | | The ApexCharts options, with `series` and `chart.type`. Called again with the new colors when the color mode changes |

`ApexChart` is in `src/components/plugins/apexcharts.tsx`. Other props, such as `id`, `role` and `aria-label`, go to the chart's `<div>`.

## Time axis

For data over time, set `xaxis.type: "datetime"`. The `categories` are then dates, as ISO strings or timestamps, and ApexCharts picks the label format for the zoom level. `tooltip.x.format` sets how the date reads in the tooltip.

ApexCharts shows the axis labels in UTC. Set `xaxis.labels.datetimeUTC: false` to show them in the browser's time zone, as the AI dashboard does.

## Stacked areas

When your series add up to a total, stack them. With `chart.stacked: true`, each series sits on top of the one before, so the top line is the total. The AI dashboard stacks its tokens per model this way, with a gradient fill and colors from the theme:

```tsx
<ApexChart
  options={(theme) => ({
    chart: { type: "area", height: 320, stacked: true, toolbar: { show: false } },
    colors: [theme.primary, theme.info],
    dataLabels: { enabled: false },
    stroke: { curve: "smooth", width: 2 },
    fill: {
      type: "gradient",
      gradient: { opacityFrom: 0.45, opacityTo: 0.05 },
    },
    series: [
      { name: "Organic", data: [31, 40, 28, 51, 42, 109, 100] },
      { name: "Paid", data: [11, 32, 45, 32, 34, 52, 41] },
    ],
  })}
/>
```

## Accessibility

- The values show in tooltips on hover. Give the chart a visible title, such as the card title, and put the figures that matter in text or a table too.
- `ApexChart` passes other props to its `<div>`, so you can name the chart there: `role="figure"` with `aria-label="Visits per hour"`.
- The legend names each series, so the chart does not depend on color alone.
- The chart does not animate under `prefers-reduced-motion: reduce`, and a color mode change redraws it without animation.

## Related

- [Next.js area chart](/nextjs/docs/charts/area-chart/): the same chart in AdminKit for Next.js
- [Bootstrap 5 area chart](/bootstrap/docs/charts/area-chart/): the ApexCharts example of the HTML version
- [Chart setup](/react/docs/charts/overview/): the `ApexChart`, `ChartJs` and `VectorMap` components
- [React mixed chart](/react/docs/charts/mixed-chart/): an area combined with columns and a line
- [ApexCharts demo](https://react-demo.adminkit.io/charts-apexcharts) and the [AI dashboard](https://react-demo.adminkit.io/dashboard-ai) with its stacked area chart

---

Canonical HTML page: https://adminkit.io/react/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