@adminlte/react 0.6.1 → 0.7.0

package/CHANGELOG.md

@@ -5,6 +5,66 @@ All notable changes to **@adminlte/react** are documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.7.0] - 2026-10-01
+
+### Changed — breaking
+
+- **Charts now use [Chart.js](https://www.chartjs.org/) 4.5 (MIT) instead of ApexCharts.** From 5.2.0 ApexCharts is distributed under the proprietary *ApexCharts License*, which requires an OEM licence for any product that redistributes it — which is what a template library does. Chart.js is MIT, like everything else this package depends on.
+  - **`ApexChart` is removed; use the new `Chart` component.** It takes a Chart.js `type`, `data` and `options` (plus optional `plugins`, `height` — default `300` px —, `ariaLabel`, `fallback`, `className`, `style`). `data`/`options` are plain values, so a Server Component can pass them (callbacks such as tooltip formatters need a client component, as before).
+  - **`SparklineChart` keeps its props** (`id`, `data`) and gains optional `color` (default `#DCE6EC`), `type` (`'line' | 'bar'`), `height` (default `50`) and `ariaLabel`.
+  - **Peer dependency `apexcharts` → `chart.js` (`>=4.5.0`, optional).** Install `chart.js` if you use `Chart`/`SparklineChart`; drop `apexcharts` and its `apexcharts.css` link — Chart.js needs no stylesheet.
+  - Why 0.7.0 and not 1.0.0: the package is pre-1.0, where the minor version is the breaking-change channel (a `^0.6.x` range will not pick up 0.7.0), and nothing else in the public API changed.
+
+### Added
+
+- **AdminLTE theme preset for Chart.js** — `applyChartTheme(Chart)`, with `readChartThemeColors()` and `withAlpha()` helpers, exported from the package and applied automatically by `Chart`. It writes `Chart.defaults` from Bootstrap's CSS variables (`--bs-body-font-family`, `--bs-body-color`, `--bs-secondary-color`, `--bs-border-color-translucent`, `--bs-body-bg`, `--bs-emphasis-color`): horizontal gridlines only, no axis borders, rounded bars, smooth lines, circular point-style legends and Bootstrap-style tooltips. A filled line dataset without its own `backgroundColor` gets a vertical gradient of its line colour. Call it yourself if you create Chart.js charts outside the component.
+- **Live dark mode and RTL.** Mounted charts re-read the theme and re-render when `<html data-bs-theme>` or `<html dir>` changes (one shared `MutationObserver`), so the colour-mode toggle restyles axes, legends and tooltips immediately; with `dir="rtl"` legends and tooltips render right-to-left.
+
+### Fixed
+
+- Docs → Plugins listed the jsVectorMap stylesheet as `jsvectormap/dist/css/jsvectormap.min.css`, a path that does not exist in jsvectormap 1.7; it is `jsvectormap/dist/jsvectormap.min.css`.
+- Dashboard v2/v3 charts were hard to read in dark mode (dark tick labels and light row stripes on a dark card); the preset now takes its colours from the active colour mode.
+
+### Migration
+
+```tsx
+// 0.6.x
+<ApexChart
+  id="sales"
+  series={[{ name: 'Sales', data: [30, 40, 35, 50] }]}
+  config={{ chart: { type: 'area', height: 300 }, colors: ['#0d6efd'], xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr'] } }}
+/>
+
+// 0.7.0
+<Chart
+  id="sales"
+  type="line"
+  height={300}
+  data={{
+    labels: ['Jan', 'Feb', 'Mar', 'Apr'],
+    datasets: [{ label: 'Sales', data: [30, 40, 35, 50], borderColor: '#0d6efd', fill: 'origin' }],
+  }}
+/>
+```
+
+| ApexCharts | Chart.js |
+|---|---|
+| `chart.type: 'area'` | `type="line"` + dataset `fill: 'origin'` |
+| `chart.type: 'bar'` (`plotOptions.bar.horizontal`) | `type="bar"` (`options.indexAxis: 'y'`) |
+| `chart.type: 'donut'` / `'pie'` / `'radar'` / `'polarArea'` | `type="doughnut"` / `"pie"` / `"radar"` / `"polarArea"` |
+| `series[i].name` / `.data` | `data.datasets[i].label` / `.data` |
+| `xaxis.categories` / `labels` | `data.labels` |
+| `colors` | per-dataset `borderColor` / `backgroundColor` |
+| `chart.height` | `height` prop |
+| `legend.show: false` | `options.plugins.legend.display: false` |
+| `tooltip.y.formatter` | `options.plugins.tooltip.callbacks.label` |
+
+### Notes
+
+- The demo's chart code shrank: the lazily-loaded chart chunk is **68.3 kB gzipped (Chart.js) vs 275.0 kB (ApexCharts)**; all demo JS 587.8 kB vs 789.1 kB gzipped.
+- Every chart on the three dashboards was re-created with the same data and series: Dashboard v1 area chart + 3 sparklines, Dashboard v2 area chart, donut and 7 table sparklines, Dashboard v3 line and grouped bar charts.
+- Verified: library type-check, lint (0 errors, 13 pre-existing warnings), 23 unit tests (4 new for the theme preset) and build (35 client modules in `src/` and `dist/`); demo type-check, production build and the `EXPORT=true` subpath export; all 67 Playwright route-smoke + a11y tests; and a Playwright crawl of all 64 exported routes at `/themes/next-react/` in light and dark mode, plus the chart pages in RTL — no console or page errors, every chart canvas painted.
+
 ## [0.6.1] - 2026-08-19
 
 ### Fixed
@@ -240,6 +300,7 @@ Next.js App Router and React Server Components.
 - Heavy third-party libraries are never bundled eagerly — they load via dynamic
   `import()` inside the components that use them.
 
+[0.7.0]: https://github.com/ColorlibHQ/adminlte-react/compare/v0.6.1...v0.7.0
 [0.6.1]: https://github.com/ColorlibHQ/adminlte-react/compare/v0.6.0...v0.6.1
 [0.6.0]: https://github.com/ColorlibHQ/adminlte-react/compare/v0.5.0...v0.6.0
 [0.5.0]: https://github.com/ColorlibHQ/adminlte-react/compare/v0.4.0...v0.5.0

package/README.md

@@ -9,7 +9,7 @@
 
 A modern React/Next.js component library for building admin dashboards and web applications with AdminLTE 4 styling and Bootstrap 5.3 — built for the Next.js App Router and React Server Components by [Colorlib](https://colorlib.com).
 
-**Status**: v0.6.0 (Early Release, AdminLTE core 4.8.1) · **Live demo:** [adminlte.io/themes/next-react](https://adminlte.io/themes/next-react/)
+**Status**: v0.7.0 (Early Release, AdminLTE core 4.8.1) · **Live demo:** [adminlte.io/themes/next-react](https://adminlte.io/themes/next-react/)
 
 <p align="center">
   <a href="https://adminlte.io/themes/next-react/">
@@ -58,7 +58,7 @@ A modern React/Next.js component library for building admin dashboards and web a
 - ♿ **Accessible** - Semantic markup, ARIA landmarks, keyboard navigation
 - 🎯 **TypeScript First** - Fully typed props, hooks, and the menu data model
 - 📱 **Responsive** - Mobile-first Bootstrap 5.3 design with an off-canvas sidebar
-- 🔌 **Lazy plugins** - ApexCharts, Tabulator, Quill, Flatpickr, Tom Select & jsVectorMap load on demand
+- 🔌 **Lazy plugins** - Chart.js, Tabulator, Quill, Flatpickr, Tom Select & jsVectorMap load on demand
 
 ## Installation
 
@@ -89,7 +89,7 @@ npm install bootstrap bootstrap-icons
 Install only the libraries for the lazy components you use:
 
 ```bash
-npm install apexcharts       # <ApexChart>, <SparklineChart>
+npm install chart.js         # <Chart>, <SparklineChart>
 npm install tabulator-tables # <Datatable>
 npm install quill            # <Editor>
 npm install flatpickr        # <InputFlatpickr>
@@ -250,7 +250,7 @@ export default function Dashboard() {
 - **`Timeline`** - Chronological timeline
 - **`NavMessages`** / **`NavNotifications`** / **`NavTasks`** - Topbar dropdown widgets
 - **`DirectChat`** - Chat widget with contacts pane
-- **`ApexChart`** / **`SparklineChart`** - ApexCharts wrappers (dynamic import)
+- **`Chart`** / **`SparklineChart`** - [Chart.js](https://www.chartjs.org/) charts (MIT, dynamic import) with the AdminLTE theme preset (`applyChartTheme`) applied — follows dark mode and RTL live
 - **`WorldMap`** - jsVectorMap world map (dynamic import)
 - **`CommandPalette`** - ⌘K searchable navigator (+ `flattenMenuToCommands` helper)
 - **`Accordion`** / **`Tabs`** - Collapsible panels & tab/pill switcher (state-driven, no Bootstrap JS)
@@ -471,6 +471,8 @@ Need advanced features, more pages, and dedicated support? Explore Colorlib's co
 
 MIT © [Colorlib](https://colorlib.com)
 
+Charts are drawn with [Chart.js](https://www.chartjs.org/) (MIT licence), an optional peer dependency you install yourself — every chart-related dependency of this package is MIT-licensed.
+
 ## Resources
 
 - [AdminLTE Documentation](https://adminlte.io)

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import react__default, { AnchorHTMLAttributes, ReactNode, Key } from 'react';
-import { ApexOptions } from 'apexcharts';
+import react__default, { AnchorHTMLAttributes, ReactNode, CSSProperties, Key } from 'react';
+import { ChartType, DefaultDataPoint, ChartData, ChartOptions, Plugin, Chart as Chart$1 } from 'chart.js';
 
 /**
  * Bootstrap color theme variants.
@@ -457,18 +457,93 @@ interface DirectChatProps {
 }
 declare function DirectChat({ badge, contacts, messages, collapsible, removable, onRemove, className, }: DirectChatProps): react.JSX.Element | null;
 
-interface ApexChartProps {
-    id: string;
-    series: NonNullable<ApexOptions['series']>;
-    config: ApexOptions;
+interface ChartProps<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> {
+    /** DOM id of the chart container. */
+    id?: string;
+    /** Chart.js chart type: `line`, `bar`, `doughnut`, `pie`, `radar`, `polarArea`, `scatter`, `bubble`… */
+    type: TType;
+    /** Chart.js `data` (labels + datasets). Plain data, so it can come from a Server Component. */
+    data: ChartData<TType, TData, TLabel>;
+    /** Chart.js `options`. Merged over the AdminLTE theme preset (`Chart.defaults`). */
+    options?: ChartOptions<TType>;
+    /** Inline Chart.js plugins for this chart only. */
+    plugins?: Plugin<TType>[];
+    /** Height of the chart area — a number is pixels. Default `300`. */
+    height?: number | string;
+    /** Accessible name for the chart (`aria-label` on the canvas). */
+    ariaLabel?: string;
+    /** Fallback content inside `<canvas>` (e.g. a data table for screen readers). */
+    fallback?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
 }
-declare function ApexChart({ id, series, config }: ApexChartProps): react.JSX.Element;
+/**
+ * Chart.js chart, lazy-loaded. `chart.js` is an optional peer dependency — install it
+ * (`npm install chart.js`); it is imported on mount, so pages without charts never load it.
+ *
+ * The AdminLTE theme preset (`applyChartTheme`) is applied automatically and follows the
+ * colour mode and document direction live. Charts resize with their container and are
+ * destroyed on unmount.
+ */
+declare function Chart<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown>({ id, type, data, options, plugins, height, ariaLabel, fallback, className, style, }: ChartProps<TType, TData, TLabel>): react.JSX.Element;
 
 interface SparklineChartProps {
     id: string;
     data: number[];
+    /** Line (and area) colour. Default `#DCE6EC`. */
+    color?: string;
+    /** `line` draws a filled area sparkline (default); `bar` draws mini columns. */
+    type?: 'line' | 'bar';
+    /** Height in pixels. Default `50`. */
+    height?: number;
+    /** Accessible name for the sparkline. */
+    ariaLabel?: string;
 }
-declare function SparklineChart({ id, data }: SparklineChartProps): react.JSX.Element;
+/**
+ * Tiny axis-less trend chart (Chart.js, lazy-loaded — install `chart.js`).
+ */
+declare function SparklineChart({ id, data, color, type, height, ariaLabel, }: SparklineChartProps): react.JSX.Element;
+
+/**
+ * AdminLTE theme preset for Chart.js.
+ *
+ * `applyChartTheme(Chart)` writes the AdminLTE look into `Chart.defaults`: the body font,
+ * colours read from Bootstrap's CSS variables (so light/dark mode and custom themes follow),
+ * subtle horizontal gridlines only, rounded bars, smooth lines, circular point-style legends
+ * and Bootstrap-style tooltips. It is idempotent — `<Chart>` calls it again whenever
+ * `<html data-bs-theme>` or `<html dir>` changes, then updates every live chart.
+ *
+ * It takes the Chart.js constructor as an argument (no static import), so this module stays
+ * safe to import from Server Components and never pulls `chart.js` into a bundle by itself.
+ */
+type ChartStatic = typeof Chart$1;
+interface ChartThemeColors {
+    /** Body font family (`--bs-body-font-family`). */
+    fontFamily: string;
+    /** Primary text colour (`--bs-body-color`) — legend labels. */
+    text: string;
+    /** Muted text colour (`--bs-secondary-color`) — axis ticks. */
+    muted: string;
+    /** Gridline / border colour (`--bs-border-color-translucent`). */
+    grid: string;
+    /** Surface colour (`--bs-body-bg`) — doughnut segment separators, point borders. */
+    surface: string;
+    /** Tooltip background (`--bs-emphasis-color`). */
+    tooltipBg: string;
+    /** Tooltip text (`--bs-body-bg`). */
+    tooltipText: string;
+    /** `true` when the document is right-to-left. */
+    rtl: boolean;
+}
+/** Reads the current theme colours from the document's Bootstrap CSS variables. */
+declare function readChartThemeColors(root?: Element): ChartThemeColors;
+/**
+ * Returns `color` with the given alpha. Accepts `#rgb`, `#rrggbb`, `#rrggbbaa`, `rgb()` and
+ * `rgba()`; anything else (named colours, gradients) is returned unchanged.
+ */
+declare function withAlpha(color: string, alpha: number): string;
+/** Applies the AdminLTE preset to `Chart.defaults`. Safe to call repeatedly. */
+declare function applyChartTheme(Chart: ChartStatic, colors?: ChartThemeColors): void;
 
 interface WorldMapProps {
     id: string;
@@ -1006,4 +1081,4 @@ declare function useTreeviewAnimation(isOpen: boolean, speed?: number): UseTreev
 
 declare function useSortable(enabled?: boolean): void;
 
-export { Accordion, type AccordionItem, type AccordionProps, Alert, ApexChart, AppContent, type AppContentProps, AuthLayout, type AuthLayoutProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, type BootstrapTheme, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreakpointSize, Button, Callout, Card, Carousel, type CarouselProps, type CarouselSlide, type ColorMode, ColorModeProvider, ColorModeToggle, type CommandItem, CommandPalette, CommandPaletteProvider, type ComponentSize, DashboardLayout, type DashboardLayoutProps, Datatable, DescriptionBlock, DirectChat, type DirectChatContact, type DirectChatMessage, Dropdown, type DropdownItem, type DropdownProps, Editor, Footer, InfoBox, Input, InputColor, InputFile, InputFlatpickr, InputSwitch, InputTomSelect, type LinkComponent, type LinkProps, LinkProvider, ListGroup, ListGroupItem, type ListGroupItemProps, type ListGroupProps, type MenuGroup, type MenuHeader, type MenuItem, type MenuNode, Modal, NavMessages, NavNotifications, NavTasks, Offcanvas, type OffcanvasProps, OffcanvasTrigger, type OffcanvasTriggerProps, Pagination, type PaginationProps, ProfileCard, Progress, ProgressGroup, Ratings, Select, Sidebar, SidebarBrand, SidebarNav, SidebarNavItem, SidebarOverlay, SidebarProvider, SmallBox, SparklineChart, Spinner, type SpinnerProps, type Step, Stepper, type StepperProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Textarea, Timeline, Toast, type ToastProps, Tooltip, type TooltipProps, Topbar, type TopbarUser, WorldMap, flattenMenuToCommands, useCardWidget, useColorModeContext, useCommandPalette, useDirectChat, useFullscreen, useLinkComponent, usePushMenu, useSidebarContext, useSortable, useTreeviewAnimation };
+export { Accordion, type AccordionItem, type AccordionProps, Alert, AppContent, type AppContentProps, AuthLayout, type AuthLayoutProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, type BootstrapTheme, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreakpointSize, Button, Callout, Card, Carousel, type CarouselProps, type CarouselSlide, Chart, type ChartProps, type ChartThemeColors, type ColorMode, ColorModeProvider, ColorModeToggle, type CommandItem, CommandPalette, CommandPaletteProvider, type ComponentSize, DashboardLayout, type DashboardLayoutProps, Datatable, DescriptionBlock, DirectChat, type DirectChatContact, type DirectChatMessage, Dropdown, type DropdownItem, type DropdownProps, Editor, Footer, InfoBox, Input, InputColor, InputFile, InputFlatpickr, InputSwitch, InputTomSelect, type LinkComponent, type LinkProps, LinkProvider, ListGroup, ListGroupItem, type ListGroupItemProps, type ListGroupProps, type MenuGroup, type MenuHeader, type MenuItem, type MenuNode, Modal, NavMessages, NavNotifications, NavTasks, Offcanvas, type OffcanvasProps, OffcanvasTrigger, type OffcanvasTriggerProps, Pagination, type PaginationProps, ProfileCard, Progress, ProgressGroup, Ratings, Select, Sidebar, SidebarBrand, SidebarNav, SidebarNavItem, SidebarOverlay, SidebarProvider, SmallBox, SparklineChart, type SparklineChartProps, Spinner, type SpinnerProps, type Step, Stepper, type StepperProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Textarea, Timeline, Toast, type ToastProps, Tooltip, type TooltipProps, Topbar, type TopbarUser, WorldMap, applyChartTheme, flattenMenuToCommands, readChartThemeColors, useCardWidget, useColorModeContext, useCommandPalette, useDirectChat, useFullscreen, useLinkComponent, usePushMenu, useSidebarContext, useSortable, useTreeviewAnimation, withAlpha };

package/dist/index.js

@@ -28,8 +28,9 @@ import { NavMessages } from "./widget/nav-messages.js";
 import { NavNotifications } from "./widget/nav-notifications.js";
 import { NavTasks } from "./widget/nav-tasks.js";
 import { DirectChat } from "./widget/direct-chat.js";
-import { ApexChart } from "./widget/apex-chart.js";
+import { Chart } from "./widget/chart.js";
 import { SparklineChart } from "./widget/sparkline-chart.js";
+import { applyChartTheme, readChartThemeColors, withAlpha } from "./lib/chart-theme.js";
 import { WorldMap } from "./widget/world-map.js";
 import { CommandPalette } from "./widget/command-palette.js";
 import { flattenMenuToCommands } from "./lib/flatten-menu.js";
@@ -69,7 +70,6 @@ import { useSortable } from "./hooks/use-sortable.js";
 export {
   Accordion,
   Alert,
-  ApexChart,
   AppContent,
   AuthLayout,
   Avatar,
@@ -80,6 +80,7 @@ export {
   Callout,
   Card,
   Carousel,
+  Chart,
   ColorModeProvider,
   ColorModeToggle,
   CommandPalette,
@@ -131,7 +132,9 @@ export {
   Tooltip,
   Topbar,
   WorldMap,
+  applyChartTheme,
   flattenMenuToCommands,
+  readChartThemeColors,
   useCardWidget,
   useColorModeContext,
   useCommandPalette,
@@ -141,5 +144,6 @@ export {
   usePushMenu,
   useSidebarContext,
   useSortable,
-  useTreeviewAnimation
+  useTreeviewAnimation,
+  withAlpha
 };

package/dist/lib/chart-theme.js

@@ -0,0 +1,120 @@
+const FALLBACK = {
+  fontFamily: '"Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+  text: "#212529",
+  muted: "rgba(33, 37, 41, 0.75)",
+  grid: "rgba(0, 0, 0, 0.175)",
+  surface: "#fff",
+  tooltipBg: "#000",
+  tooltipText: "#fff",
+  rtl: false
+};
+function readChartThemeColors(root) {
+  if (typeof window === "undefined" || typeof document === "undefined") return FALLBACK;
+  const el = root ?? document.documentElement;
+  const css = getComputedStyle(el);
+  const v = (name, fallback) => css.getPropertyValue(name).trim() || fallback;
+  return {
+    fontFamily: v("--bs-body-font-family", FALLBACK.fontFamily),
+    text: v("--bs-body-color", FALLBACK.text),
+    muted: v("--bs-secondary-color", FALLBACK.muted),
+    grid: v("--bs-border-color-translucent", FALLBACK.grid),
+    surface: v("--bs-body-bg", FALLBACK.surface),
+    tooltipBg: v("--bs-emphasis-color", FALLBACK.tooltipBg),
+    tooltipText: v("--bs-body-bg", FALLBACK.tooltipText),
+    rtl: (document.documentElement.getAttribute("dir") || css.direction) === "rtl"
+  };
+}
+function withAlpha(color, alpha) {
+  const c = color.trim();
+  const hex = /^#([0-9a-f]{3,8})$/i.exec(c);
+  if (hex) {
+    let h = hex[1];
+    if (h.length === 3 || h.length === 4) h = h.split("").map((x) => x + x).join("");
+    if (h.length !== 6 && h.length !== 8) return color;
+    const n = (i) => parseInt(h.slice(i, i + 2), 16);
+    return `rgba(${n(0)}, ${n(2)}, ${n(4)}, ${alpha})`;
+  }
+  const rgb = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i.exec(c);
+  if (rgb) return `rgba(${rgb[1]}, ${rgb[2]}, ${rgb[3]}, ${alpha})`;
+  return color;
+}
+function lineBackground(ctx) {
+  const raw = ctx.dataset?.borderColor;
+  const base = typeof raw === "string" ? raw : void 0;
+  if (!base) return "rgba(0, 0, 0, 0.1)";
+  if (ctx.type !== "dataset" || !ctx.dataset.fill) return base;
+  const { chart } = ctx;
+  const area = chart.chartArea;
+  if (!area) return withAlpha(base, 0.2);
+  const gradient = chart.ctx.createLinearGradient(0, area.top, 0, area.bottom);
+  gradient.addColorStop(0, withAlpha(base, 0.35));
+  gradient.addColorStop(1, withAlpha(base, 0.02));
+  return gradient;
+}
+function applyChartTheme(Chart, colors = readChartThemeColors()) {
+  const d = Chart.defaults;
+  d.font.family = colors.fontFamily;
+  d.font.size = 12;
+  d.color = colors.muted;
+  d.borderColor = colors.grid;
+  const scale = d.scale;
+  scale.grid.color = colors.grid;
+  scale.grid.drawTicks = false;
+  scale.border.display = false;
+  scale.ticks.padding = 8;
+  scale.ticks.color = colors.muted;
+  const category = d.scales.category;
+  if (category) category.grid = { ...category.grid || {}, display: false };
+  d.elements.line.tension = 0.4;
+  d.elements.line.borderWidth = 2.5;
+  d.elements.line.borderCapStyle = "round";
+  d.elements.point.radius = 0;
+  d.elements.point.hoverRadius = 5;
+  d.elements.point.hitRadius = 12;
+  d.elements.point.borderWidth = 2;
+  d.elements.point.hoverBorderWidth = 2;
+  d.elements.point.pointStyle = "circle";
+  d.elements.bar.borderRadius = 4;
+  d.elements.bar.borderSkipped = "start";
+  d.elements.arc.borderColor = colors.surface;
+  d.elements.arc.borderWidth = 2;
+  d.elements.arc.hoverOffset = 6;
+  const lineDefaults = d.datasets.line;
+  if (lineDefaults) {
+    lineDefaults.backgroundColor = lineBackground;
+    lineDefaults.pointHoverBackgroundColor = colors.surface;
+  }
+  const barDefaults = d.datasets.bar;
+  if (barDefaults) barDefaults.maxBarThickness = 28;
+  for (const type of ["line", "bar"]) {
+    const o = Chart.overrides[type];
+    if (o) o.interaction = { mode: "index", intersect: false };
+  }
+  const legend = d.plugins.legend;
+  legend.rtl = colors.rtl;
+  legend.labels.color = colors.text;
+  legend.labels.usePointStyle = true;
+  legend.labels.pointStyle = "circle";
+  legend.labels.boxWidth = 8;
+  legend.labels.boxHeight = 8;
+  legend.labels.padding = 16;
+  const tooltip = d.plugins.tooltip;
+  tooltip.rtl = colors.rtl;
+  tooltip.backgroundColor = withAlpha(colors.tooltipBg, 0.9);
+  tooltip.titleColor = colors.tooltipText;
+  tooltip.bodyColor = colors.tooltipText;
+  tooltip.footerColor = colors.tooltipText;
+  tooltip.borderWidth = 0;
+  tooltip.cornerRadius = 6;
+  tooltip.padding = 10;
+  tooltip.boxPadding = 4;
+  tooltip.caretSize = 5;
+  tooltip.usePointStyle = true;
+  tooltip.titleFont = { weight: "bold" };
+  tooltip.titleMarginBottom = 6;
+}
+export {
+  applyChartTheme,
+  readChartThemeColors,
+  withAlpha
+};

package/dist/widget/chart.js

@@ -0,0 +1,125 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { applyChartTheme } from "../lib/chart-theme.js";
+const liveCharts = /* @__PURE__ */ new Map();
+let ChartClass = null;
+let observer = null;
+function retheme() {
+  if (!ChartClass) return;
+  applyChartTheme(ChartClass);
+  liveCharts.forEach((freshOptions, chart) => {
+    chart.options = freshOptions();
+    chart.update("none");
+  });
+}
+function track(chart, freshOptions) {
+  liveCharts.set(chart, freshOptions);
+  if (!observer && typeof MutationObserver !== "undefined") {
+    observer = new MutationObserver(retheme);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-bs-theme", "dir"]
+    });
+  }
+}
+function untrack(chart) {
+  liveCharts.delete(chart);
+  if (liveCharts.size === 0 && observer) {
+    observer.disconnect();
+    observer = null;
+  }
+}
+async function loadChart() {
+  if (!ChartClass) {
+    const mod = await import("chart.js/auto");
+    ChartClass = mod.default;
+  }
+  applyChartTheme(ChartClass);
+  return ChartClass;
+}
+function cloneData(data) {
+  try {
+    return structuredClone(data);
+  } catch {
+    return data;
+  }
+}
+function cloneOptions(value) {
+  if (Array.isArray(value)) return value.map(cloneOptions);
+  if (value && typeof value === "object" && Object.getPrototypeOf(value) === Object.prototype) {
+    const out = {};
+    for (const [k, v] of Object.entries(value)) out[k] = cloneOptions(v);
+    return out;
+  }
+  return value;
+}
+function withBaseOptions(options) {
+  return { responsive: true, maintainAspectRatio: false, ...cloneOptions(options || {}) };
+}
+function Chart({
+  id,
+  type,
+  data,
+  options,
+  plugins,
+  height = 300,
+  ariaLabel,
+  fallback,
+  className,
+  style
+}) {
+  const canvasRef = useRef(null);
+  const chartRef = useRef(null);
+  const optionsRef = useRef(options);
+  useEffect(() => {
+    optionsRef.current = options;
+  });
+  const dataKey = JSON.stringify(data);
+  const optionsKey = JSON.stringify(options ?? {});
+  useEffect(() => {
+    let cancelled = false;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    loadChart().then((ChartCtor) => {
+      if (cancelled || !canvasRef.current) return;
+      ChartCtor.getChart(canvas)?.destroy();
+      const chart = new ChartCtor(canvas, {
+        type,
+        data: cloneData(data),
+        options: withBaseOptions(options),
+        plugins
+      });
+      chartRef.current = chart;
+      track(chart, () => withBaseOptions(optionsRef.current));
+    }).catch((err) => console.error("Chart init error:", err));
+    return () => {
+      cancelled = true;
+      const chart = chartRef.current;
+      if (chart) {
+        untrack(chart);
+        chart.destroy();
+        chartRef.current = null;
+      }
+    };
+  }, [type]);
+  useEffect(() => {
+    const chart = chartRef.current;
+    if (!chart) return;
+    chart.data = cloneData(data);
+    chart.options = withBaseOptions(options);
+    chart.update();
+  }, [dataKey, optionsKey]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      className,
+      style: { position: "relative", height: typeof height === "number" ? `${height}px` : height, ...style },
+      children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, role: "img", "aria-label": ariaLabel ?? `${type} chart`, children: fallback })
+    }
+  );
+}
+export {
+  Chart
+};

package/dist/widget/sparkline-chart.js

@@ -1,42 +1,53 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
-function SparklineChart({ id, data }) {
-  const containerRef = useRef(null);
-  const chartRef = useRef(null);
-  useEffect(() => {
-    let cancelled = false;
-    const el = containerRef.current;
-    if (!el) return;
-    const initChart = async () => {
-      const ApexCharts = (await import("apexcharts")).default;
-      if (cancelled || !containerRef.current) return;
-      const options = {
-        series: [{ data }],
-        chart: {
-          type: "area",
-          height: 50,
-          sparkline: { enabled: true }
-        },
-        stroke: { curve: "straight" },
-        fill: { opacity: 0.3 },
-        yaxis: { min: 0 },
-        colors: ["#DCE6EC"]
-      };
-      const chart = new ApexCharts(el, options);
-      chartRef.current = chart;
-      chart.render();
-    };
-    initChart().catch((err) => console.error("SparklineChart init error:", err));
-    return () => {
-      cancelled = true;
-      if (chartRef.current) {
-        chartRef.current.destroy();
-        chartRef.current = null;
+import { useMemo } from "react";
+import { Chart } from "./chart.js";
+import { withAlpha } from "../lib/chart-theme.js";
+function SparklineChart({
+  id,
+  data,
+  color = "#DCE6EC",
+  type = "line",
+  height = 50,
+  ariaLabel = "Sparkline"
+}) {
+  const chartData = useMemo(
+    () => ({
+      labels: data.map((_, i) => String(i + 1)),
+      datasets: [
+        type === "bar" ? { data, backgroundColor: color, borderRadius: 2, maxBarThickness: 8 } : {
+          data,
+          borderColor: color,
+          backgroundColor: withAlpha(color, 0.3),
+          borderWidth: 2,
+          fill: "origin",
+          tension: 0,
+          pointRadius: 0,
+          pointHoverRadius: 0
+        }
+      ]
+    }),
+    [data, color, type]
+  );
+  return /* @__PURE__ */ jsx(
+    Chart,
+    {
+      id,
+      type,
+      height,
+      ariaLabel,
+      data: chartData,
+      options: {
+        events: [],
+        layout: { padding: 1 },
+        plugins: { legend: { display: false }, tooltip: { enabled: false } },
+        scales: {
+          x: { display: false },
+          y: { display: false, min: 0 }
+        }
       }
-    };
-  }, [id, data]);
-  return /* @__PURE__ */ jsx("div", { id, ref: containerRef });
+    }
+  );
 }
 export {
   SparklineChart

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminlte/react",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "AdminLTE 4 React/Next.js component library",
   "license": "MIT",
   "type": "module",
@@ -36,10 +36,11 @@
     "react",
     "next",
     "bootstrap",
-    "components"
+    "components",
+    "chartjs"
   ],
   "peerDependencies": {
-    "apexcharts": ">=4.0.0",
+    "chart.js": ">=4.5.0",
     "flatpickr": ">=4.6.0",
     "jsvectormap": ">=1.6.0",
     "next": ">=14.0.0",
@@ -51,7 +52,7 @@
     "tom-select": ">=2.3.0"
   },
   "peerDependenciesMeta": {
-    "apexcharts": {
+    "chart.js": {
       "optional": true
     },
     "flatpickr": {
@@ -84,7 +85,7 @@
     "@types/react-dom": "^19.2.4",
     "@types/sortablejs": "^1.15.9",
     "admin-lte": "^4.8.1",
-    "apexcharts": "^6.10.0",
+    "chart.js": "^4.5.1",
     "eslint": "^10.8.1",
     "eslint-plugin-react-hooks": "^7.1.1",
     "flatpickr": "^4.6.13",

package/dist/widget/apex-chart.js

@@ -1,40 +0,0 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
-function ApexChart({ id, series, config }) {
-  const containerRef = useRef(null);
-  const chartRef = useRef(null);
-  const seriesKey = JSON.stringify(series);
-  const configKey = JSON.stringify(config);
-  useEffect(() => {
-    let cancelled = false;
-    const el = containerRef.current;
-    if (!el) return;
-    if (chartRef.current) {
-      chartRef.current.updateOptions({ ...config, series }, true, true);
-      return;
-    }
-    const initChart = async () => {
-      const ApexCharts = (await import("apexcharts")).default;
-      if (cancelled || !containerRef.current) return;
-      const chart = new ApexCharts(el, { ...config, series });
-      chartRef.current = chart;
-      chart.render();
-    };
-    initChart().catch((err) => console.error("ApexChart init error:", err));
-    return () => {
-      cancelled = true;
-    };
-  }, [id, seriesKey, configKey]);
-  useEffect(
-    () => () => {
-      chartRef.current?.destroy();
-      chartRef.current = null;
-    },
-    []
-  );
-  return /* @__PURE__ */ jsx("div", { id, ref: containerRef });
-}
-export {
-  ApexChart
-};