# Next.js Charts with Chart.js and ApexCharts

Next.js charts in client components: the ChartJs, ApexChart (PRO) and VectorMap components of AdminKit, with colors that follow light and dark mode.

AdminKit for Next.js draws charts with Chart.js and ApexCharts, and maps with jsVectorMap. This page covers what the three components have in common. Every chart type has its own page in the sidebar, starting with the [bar chart](/nextjs/docs/charts/bar-chart/).

These libraries draw in the browser, so AdminKit wraps each one in a client component: a file that starts with `"use client"`. Their props are functions, and a server component page cannot pass a function to a client component. So put each chart in a client component of your own, and render that from the page. The page stays a server component and keeps its `metadata` export. The wrappers are in `src/components/plugins/`.

Each component takes a function of the theme colors instead of a fixed configuration (see [Dark mode](/nextjs/docs/customization/dark-mode/#theme-colors)). It calls the function when it draws, and again with the new colors when the color mode changes. Read your colors from its `theme` argument, and the chart follows light and dark mode.

The theme colors only exist in the browser. During the static export and hydration (the browser taking over the HTML that Next.js built), the components have no colors yet. So the exported HTML has a skeleton in the chart's place, and the chart draws once the page has hydrated. ApexCharts and jsVectorMap are imported inside an effect, which only runs in the browser, so you don't need `next/dynamic`.

| Component | Library | Edition | Demo |
| --- | --- | --- | --- |
| `ChartJs` | [Chart.js](https://www.chartjs.org/) 4 | Free and PRO | [/charts-chartjs](https://nextjs-demo.adminkit.io/charts-chartjs) |
| `ApexChart` | [ApexCharts](https://apexcharts.com/) 4.7 | PRO | [/charts-apexcharts](https://nextjs-demo.adminkit.io/charts-apexcharts) |
| `VectorMap` | [jsVectorMap](https://jvm-docs.vercel.app/) | Free and PRO | [/maps-vector](https://nextjs-demo.adminkit.io/maps-vector) |

The first draw is animated, unless the user's system asks for reduced motion (`prefers-reduced-motion`). When the color mode changes, charts redraw without animation.


## Chart.js

The `config` prop of `ChartJs` is a function that returns a [Chart.js configuration](https://www.chartjs.org/docs/latest/configuration/). Other props, such as `id` and `aria-label`, go to the `<canvas>`.

Chart.js takes its size from the container, so give the container a height. `.chart` is 300px high. `.chart-xs`, `.chart-sm`, `.chart-lg` and `.chart-xl` are 150, 250, 350 and 500px.

```tsx
"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>
  );
}
```

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

## ApexCharts

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

The `options` prop of `ApexChart` returns the [ApexCharts options](https://apexcharts.com/docs/options/), with the series and `chart.type`. Put the chart in a `position-relative` element with the chart's height, so the skeleton has the same size:

```tsx
"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>
  );
}
```

If your options don't set them, the theme fills in the colors. Series get the primary, success, warning, danger and info colors. Labels get the gray text color of the current mode, and tooltips its light or dark theme.

ApexCharts 4.7.0 is the last release under the MIT license, so AdminKit stays on it. Check the license of later releases before you upgrade.

## Vector maps

The [vector map](/nextjs/docs/plugins/vector-map/) page has more examples.

`map` is `"world"`. In AdminKit PRO it can also be `"us_aea_en"`, the United States. `options` returns [jsVectorMap's options](https://jvm-docs.vercel.app/) without `selector` and `map`. The regions and markers are restyled with the new colors when the color mode changes. Give the map a height:

```tsx
<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 colors

For anything else you draw with JavaScript, read the colors with `useTheme()` from `@/hooks/use-theme`, inside a client component. During server rendering and hydration (the browser taking over the HTML that Next.js built), it returns `null`. After that it returns the colors of the current mode, and the component renders again when the mode changes.

---

Canonical HTML page: https://adminkit.io/nextjs/docs/charts/overview/

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