Charts & Plugins
AdminLTE 4 deliberately ships a lean dependency tree — no charting, no calendar, no jQuery. Instead it documents best-in-class, jQuery-free third-party libraries you drop in only when you need them. Each loads from a CDN (or npm) and initialises with a few lines of vanilla JS.
The integration pattern
Every integration follows the same three steps: add the library's CSS to <head>, add its JS before </body> (after AdminLTE), add a target element, and initialise it. The demo dashboard pages (dist/index.html, dist/pages/*.html) include the library tags in their <head>/footer and the init code in an inline script at the bottom.
Pin a specific version in CDN URLs so snippets stay reproducible — third-party libraries publish independently of AdminLTE. For production, prefer an npm install through your bundler, or self-host the minified files.
Libraries used by the demos
| Need | Library | Demo page |
|---|---|---|
| Charts (used in the dashboards) | ApexCharts | index.html |
| Charts (canvas-based) | Chart.js | — |
| Vector maps | jsvectormap | index.html |
| Calendar | FullCalendar | pages/calendar.html |
| Data tables | Tabulator | tables/data.html |
| Drag & drop | SortableJS | pages/kanban.html |
ApexCharts
ApexCharts is the chart library used in the AdminLTE dashboards. Add the CSS and JS, then render into a target div:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css">
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"></script>
<div id="chart"></div>
<script>
new ApexCharts(document.querySelector("#chart"), {
chart: { type: "area", height: 300 },
series: [{ name: "Visits", data: [30, 40, 35, 50, 49, 60, 70] }],
xaxis: { categories: ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"] }
}).render();
</script>Chart.js
Chart.js is the most-requested traditional, canvas-based chart library:
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1"></script>
<canvas id="bar-chart" height="120"></canvas>
<script>
new Chart(document.getElementById("bar-chart"), {
type: "bar",
data: {
labels: ["Q1","Q2","Q3","Q4"],
datasets: [{ label: "Revenue", data: [120, 190, 170, 230] }]
}
});
</script>FullCalendar
FullCalendar powers pages/calendar.html — drag-and-drop scheduling and multiple views:
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.20/index.global.min.js"></script>
<div id="calendar"></div>
<script>
new FullCalendar.Calendar(document.getElementById("calendar"), {
initialView: "dayGridMonth",
headerToolbar: { start: "prev,next today", center: "title",
end: "dayGridMonth,timeGridWeek,listWeek" },
events: [{ title: "Team standup", start: "2026-06-01" }]
}).render();
</script>jsvectormap
jsvectormap renders the interactive vector map on the dashboard. The demo loads its CSS and JS (plus a maps data file) from jsDelivr:
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/css/jsvectormap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/js/jsvectormap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/maps/world.js"></script>
<div id="map" style="height: 300px;"></div>
<script>
new jsVectorMap({ selector: "#map", map: "world" });
</script>Loading order
Put third-party CSS in <head> after AdminLTE's CSS, and put plugin JS at the end of <body> after the AdminLTE bundle, then your init script last:
<!-- ... Bootstrap, AdminLTE JS ... -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"></script>
<script>/* your chart/calendar/map init code */</script>AdminLTE ships none of these libraries — keeping the framework footprint small is intentional. The full recommended set (Flatpickr, Tom Select, noUiSlider, Quill, EasyMDE, Dropzone, FilePond, GLightbox, IMask, and more) is documented in the AdminLTE Integrations guide; all are MIT-licensed and jQuery-free.