# React Charts with Chart.js and ApexCharts

React charts for AdminKit: the ChartJs, ApexChart (PRO) and VectorMap components, with colors that follow light and dark mode.

Charts and maps in AdminKit for React are React components, each one a wrapper around a library: Chart.js, ApexCharts or jsVectorMap. This page covers what they have in common, and the table below lists them. Every chart type has its own page in the sidebar, starting with the [bar chart](/react/docs/charts/bar-chart/).

You don't give these components a fixed configuration. You give them a function that receives the theme colors (see [Dark mode](/react/docs/customization/dark-mode/#theme-colors)). The component calls it when it draws. When the color mode changes, it calls it again with the new colors. So read your colors from the `theme` argument instead of writing them out.

ApexCharts and jsVectorMap are only downloaded when a chart or map that uses them first renders. A skeleton keeps their place until they have drawn. The components are in `src/components/plugins/`.

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

Charts animate when they first draw, unless the user's system asks for reduced motion (`prefers-reduced-motion`). A color mode change redraws them without animation.


## Chart.js

`ChartJs` takes a `config` 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 sizes the chart to fit its container, so the container needs a height. `.chart` is 300px high. `.chart-xs`, `.chart-sm`, `.chart-lg` and `.chart-xl` are 150, 250, 350 and 500px.

```tsx
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 also 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. Radar charts keep straight lines. It imports `chart.js/auto`, so every chart type and plugin is registered.

## ApexCharts

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

`ApexChart` takes an `options` function that returns the [ApexCharts options](https://apexcharts.com/docs/options/), including the series and `chart.type`. Wrap it in a `position-relative` element as high as the chart, so the skeleton takes up the same space:

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

Whatever your options leave out follows the theme. The series take the primary, success, warning, danger and info colors. The labels take the gray text color of the current 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 maps

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

Set `map` to `"world"`. AdminKit PRO also has `"us_aea_en"`, a map of the United States. `options` returns [jsVectorMap's options](https://jvm-docs.vercel.app/) without `selector` and `map`. When the color mode changes, the regions and markers get the new colors. 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, get the colors from `useTheme()` in `@/hooks/use-theme`. It returns the colors of the current mode, and your component renders again when the mode changes.

---

Canonical HTML page: https://adminkit.io/react/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