Charts

Chart.js Integration

Admindek draws every dashboard chart with Chart.js 4 through react-chartjs-2. Both are MIT licensed, as is the one extra plugin, chartjs-chart-matrix, used for the heatmap.

Two files make the charts look like Admindek:

• src/lib/chart-theme.ts — the shared theme preset. It sets Chart.defaultsfrom the template's CSS variables (Inter 12px, muted text, subtle horizontal gridlines, smooth lines, rounded bars, bottom legend, dark tooltip), re-reads them when dark mode, RTL or the colour preset changes, and exports helpers: gradient(), alpha(), sparkline(), radial() and palette().
• src/components/dashboard/chart.tsx — the AdmindekChart component. It renders on the client, fills its container, resizes with it, repaints on theme changes and destroys the chart on unmount.

10 chart types are included in the demo:

Using Charts

Pass standard Chart.js type, data and options to AdmindekChart. data and options may also be functions of the theme colours; they are called again whenever the theme changes, so a series can follow the active colour preset.

import type { ChartData, ChartOptions } from "chart.js";
import { AdmindekChart } from "@/components/dashboard/chart";
import { gradient, type ChartTheme } from "@/lib/chart-theme";

const data = (t: ChartTheme): ChartData<"line"> => ({
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
  datasets: [
    {
      label: "Revenue",
      data: [31, 40, 28, 51, 42, 65],
      borderColor: t.primary,
      backgroundColor: gradient("primary"), // fading area fill
      fill: true,
    },
  ],
});

const options: ChartOptions<"line"> = {
  plugins: { legend: { position: "top", align: "end" } },
};

export function RevenueChart() {
  return <AdmindekChart type="line" data={data} options={options} height={300} />;
}

Keep data and options stable between renders (module constants, theme functions or useMemo); a new object on every render restarts the chart animation.

Gauges and Sparklines

radial() builds a progress ring or gauge (a doughnut with a track and an optional centre label), and sparkline() returns options for a chart without axes, legend or tooltip.

import { radial, sparkline } from "@/lib/chart-theme";

const goal = radial({ values: [76], colors: ["success"], text: "76%", cutout: "72%" });

<AdmindekChart type="doughnut" data={goal.data} options={goal.options} height={160} />
<AdmindekChart type="line" data={trend} options={sparkline()} height={50} width={80} />

Legend Toggle

Chart.js legends are interactive: click a series name to show or hide that series. It is particularly useful on multi-series charts such as the Mixed and Stacked Bar types. Hide a legend with plugins: { legend: { display: false } }.

Chart Options

Chart configuration is typed with the ChartData and ChartOptions types exported from chart.js, which gives you TypeScript autocompletion for every option — colours, scales, tooltips, formatters and more. See the Chart.js documentation.

For a live preview of all 10 chart types, visit the /charts/chartjs demo page inside the dashboard.