Adminlte Laravel Laravel Package

Getting Started

• Install with composer require colorlibhq/adminlte-laravel, then run php artisan adminlte:install. The installer now pulls Chart.js 4 (MIT) — chart.js@^4.5 in package.json and vendor/chartjs/chart.umd.min.js plus the package preset vendor/adminlte/js/charts.js in public/. ApexCharts is gone from the package entirely as of v1.7.0.
• First places to look: docs/plugins.md (the new chart docs, including window.AdminLteCharts and Components\Tool\Chart::config()), config/adminlte.php under plugins, and the Dashboard v1/v2/v3 demo views, which were rewritten for Chart.js and are the best working reference for area, line, bar, donut and sparkline setups.
• First use case: drop a chart into a dashboard view with the Blade component — <x-adminlte-chart type="area" :options="$options" height="300" />. type still accepts area, line, bar, pie, donut, radar, polarArea, scatter, bubble and sparkline; options now takes Chart.js options, and old ApexCharts-style keys are translated where an equivalent exists.
• Because the chartjs plugin is registered by the service provider even when your published config/adminlte.php has no chartjs entry, a fresh upgrade renders charts without config edits. The config entry is only needed to change paths or load the plugin on every page.
• Charts are now licence-clean for redistribution: Chart.js is MIT, so you no longer inherit ApexCharts' proprietary terms (relevant if your app is shipped to clients or open-sourced).

Implementation Patterns

• Server-side config, client-side render. Build the Chart.js config in PHP with Components\Tool\Chart::config() (returns a plain array), json_encode it into the options prop, and let the Blade component render the <canvas>. This keeps datasets, labels and colours testable in PHP instead of scattering them across JS.
• Theme-aware charts by default. The shipped preset themes Chart.defaults from the page's CSS variables and re-themes every chart when the light/dark/auto toggle or text direction changes, and it resizes charts inside tabs, modals and collapsed cards. Don't hardcode gridline/label colours — read them through AdminLteCharts.color() / alpha() / palette() so dark mode stays consistent.
• Hand-written charts. For charts you initialise yourself, use AdminLteCharts.create(el, config) rather than new Chart(...) — you get the theme, dark-mode and resize handling for free. Use AdminLteCharts.sparkline(el, data) for inline stat-card sparklines and AdminLteCharts.refresh() / init() after injecting markup via AJAX or Livewire.
• Canvas ids are addressable. The component's id prop is now the canvas id, so Chart.getChart('salesChart') returns the live instance — handy for chart.data.datasets[0].data = ...; chart.update() in polling dashboards. Make sure ids are unique when looping.
• Upgrade workflow for existing apps:

  composer update colorlibhq/adminlte-laravel
  npm uninstall apexcharts
  npm install -D chart.js@^4.5
  php artisan adminlte:install --only=assets --no-interaction-deps
  rm -rf public/vendor/apexcharts
  npm run build
  

  Then re-publish views (vendor:publish --tag=adminlte-views --force, after copying your edits) or delete only the files you never changed, drop the apexcharts key from config/adminlte.php, and remove the dead ApexCharts block from resources/js/adminlte.js.
• Port custom charts incrementally. Any hand-rolled new ApexCharts(...) needs rewriting against Chart.js; the old ApexCharts toolbar (zoom, SVG/PNG download) has no replacement, so if you relied on export buttons build them yourself with chart.toBase64Image().

Gotchas and Tips

• composer update does not touch your published files. This is the number-one upgrade trap: published demo dashboards in resources/views/vendor/adminlte keep calling new ApexCharts(...), and the old components/tool/chart.blade.php renders an empty box because nothing initialises it any more. Re-publish or delete.
• Old options are translated, not honoured. Only colors, labels, chart.stacked, chart.sparkline.enabled, plotOptions.bar.horizontal, legend.show/position, stroke.curve/width, xaxis.categories, yaxis.min/max are mapped. Everything else — annotations, toolbars, gradients, custom formatters — is silently dropped. Audit any chart that looks subtly wrong after upgrading.
• Don't bypass the preset. Charts created with raw new Chart() will not follow the dark/light toggle or the RTL switch, and will often keep light-mode gridlines — exactly the bug the new demo pages fix. Route through AdminLteCharts.create() or the Blade component.
• Script order matters. vendor/chartjs/chart.umd.min.js must load before vendor/adminlte/js/charts.js; the preset assumes the Chart global. If you bundle assets yourself, keep that ordering or import the preset as an ES module.
• Duplicate canvas ids break lookups. Chart.getChart(id) returns the first match; in a @foreach of charts, suffix the id with the model key.
• Charts in hidden containers. The preset resizes charts in tabs, modals and collapsed cards, but if you render a chart into a container that is display:none at construction time, call AdminLteCharts.refresh() after showing it. Same after Livewire/Alpine swaps DOM.
• Two recently fixed bugs are worth knowing about if you pin an older 1.7.x or stay on 1.6.x: an options array containing a chart key (e.g. ['chart' => ['stacked' => true]]) used to wipe the component's type and height and render a line chart, and pie/donut charts ignored categories and labelled slices series-1, series-2.
• Extension points: the chartjs plugin entry in config/adminlte.php for path overrides, AdminLteCharts.palette() to align chart colours with your own brand tokens, and Chart::config() as a seam for wrapping chart generation in your own service or Blade component.