Charts

The chart and map libraries draw in the browser, so AdminKit wraps each in a client component in src/components/plugins/. Instead of a fixed configuration, each takes a function of the theme colors (see Dark mode). The component calls it when it draws and again with the new colors when the color mode changes, so read colors from its theme argument. Until the chart has drawn, a skeleton keeps its place.

Charts animate when they first draw, except under prefers-reduced-motion; a color mode change redraws them without animation.

Chart.jsCopy Anchor Link

config returns a Chart.js configuration. Other props, such as id and aria-label, go to the <canvas>. Chart.js sizes the chart from its container, so put it in an element with a height: .chart is 300px high, .chart-xs, .chart-sm, .chart-lg and .chart-xl are 150, 250, 350 and 500px.

"use client";

import { ChartJs } from "@/components/plugins/chartjs";

export function SalesChart() {
  return (
    <div className="chart">
      <ChartJs
        aria-label="Sales per month"
        config={(theme) => ({
          type: "bar",
          data: {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
            datasets: [
              {
                label: "Sales",
                backgroundColor: theme.primary,
                data: [54, 67, 41, 55, 62, 45],
              },
            ],
          },
          options: {
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
          },
        })}
      />
    </div>
  );
}

The wrapper sets Chart.js' defaults for the whole app: the Inter font, the text and grid colors of the current mode, rounded bars and curved lines (straight on radar charts). It imports chart.js/auto, so every chart type and plugin is registered.

ApexChartsCopy Anchor Link

options returns the ApexCharts options, with the series and chart.type. Put it in a position-relative element with the chart's height, so the skeleton has the same size:

"use client";

import { ApexChart } from "@/components/plugins/apexcharts";

export function VisitsChart() {
  return (
    <div className="position-relative" style={{ minHeight: 365 }}>
      <ApexChart
        options={(theme) => ({
          chart: { type: "area", height: 350 },
          series: [{ name: "Visits", data: [31, 40, 28, 51, 42, 109, 100] }],
          colors: [theme.primary],
          dataLabels: { enabled: false },
        })}
      />
    </div>
  );
}

Unless the options set them, the series take the primary, success, warning, danger and info colors, the labels the gray text color of the mode, and the tooltips its light or dark theme. AdminKit stays on ApexCharts 4.7.0, the last release under the MIT license; check the license of later releases before you upgrade.

Vector mapsCopy Anchor Link

map is "world", or in AdminKit PRO also "us_aea_en" (the United States). options returns jsVectorMap's options without selector and map. When the mode changes, the regions and markers are restyled with the new colors. Give the map a height:

<div className="position-relative" style={{ height: 350 }}>
  <VectorMap
    map="world"
    className="h-100"
    options={(theme) => ({
      zoomOnScroll: false,
      regionStyle: { initial: { fill: theme["gray-200"] } },
      markers: [{ name: "London", coords: [51.507351, -0.127758] }],
      markerStyle: { initial: { fill: theme.primary, r: 9 } },
    })}
  />
</div>

Other colorsCopy Anchor Link

For anything else drawn with JavaScript, read the colors with useTheme() from @/hooks/use-theme in a client component. It returns null during server rendering and hydration, then the colors of the current mode, and the component renders again when the mode changes.