Charts

ApexCharts Integration

Admindek uses react-apexcharts for all chart visualizations. Charts are lazy-loaded with React Suspense to keep the initial bundle small — the ApexCharts library is only fetched when a chart is actually rendered on screen.

10 chart types are included in the demo:

Using Charts

Import the LazyChart wrapper, which handles the Suspense boundary and dynamic import for you. Pass standard ApexCharts options and series props along with a type string.

import { LazyChart } from "@dashboardpack/core/components/shared/lazy-chart";
import type { ApexOptions } from "apexcharts";

const options: ApexOptions = {
  chart: { toolbar: { show: false } },
  xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"] },
  legend: { show: true },
};

const series = [{ name: "Revenue", data: [31, 40, 28, 51, 42, 65] }];

export function RevenueChart() {
  return (
    <LazyChart
      type="area"
      height={300}
      options={options}
      series={series}
    />
  );
}

Legend Toggle

All charts ship with legend: { show: true } in their options. This enables ApexCharts' built-in interactive legend, which lets users click a series name to show or hide that series in the chart. It is particularly useful on multi-series charts such as the Mixed, Stacked Bar, and Heatmap types.

Chart Options

All chart configuration is typed with the ApexOptions interface exported from the apexcharts package. This gives you full TypeScript autocompletion for every chart option — colours, annotations, grid lines, formatters, and more.

For a live preview of all 10 chart types with their full option sets, visit the /charts/apex-charts demo page inside the dashboard.