React Area Chart

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 you draw it with ApexChart, a React component around ApexCharts. Its options prop is a function of the theme colors, so the chart follows light and dark mode. Chart setup explains how the component works.

ExampleCopy Anchor Link

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):

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>
    </>
  );
}

PropsCopy Anchor Link

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

Time axisCopy Anchor Link

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 areasCopy Anchor Link

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:

<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] },
    ],
  })}
/>

AccessibilityCopy Anchor Link

• 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.

RelatedCopy Anchor Link

• Next.js area chart: the same chart in AdminKit for Next.js
• Bootstrap 5 area chart: the ApexCharts example of the HTML version
• Chart setup: the ApexChart, ChartJs and VectorMap components
• React mixed chart: an area combined with columns and a line
• ApexCharts demo and the AI dashboard with its stacked area chart