Charts

AdminKit wraps the chart and map libraries in components 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. ApexCharts and jsVectorMap load with the page that uses them, and a skeleton keeps their place until they have drawn.

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.

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:

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. It returns the colors of the current mode, and the component renders again when the mode changes.