Charts & Plugins

Charts, maps, data tables and the rich-text editor are optional plugin-backed Tool components. Each renders a data-* container with a JSON config; the shipped initializer lazily imports the matching library only when an element is on the page — so you install just the plugins you use.

How it works

When you scaffold the Vite front-end with adminlte_install, it copies assets/adminlte-plugins.js (the initializer) and assets/adminlte-charts.js (the Chart.js theme preset) and wires the initializer into assets/app.js. On DOMContentLoaded the initializer scans the page; if it finds a data-chartjs, data-tabulator, data-jsvectormap, data-quill or data-sortable element, it dynamically imports the corresponding library and mounts it. Install only the libraries whose components you actually render:

npm i chart.js jsvectormap tabulator-tables quill sortablejs   # pick what you need

Charts (Chart.js)

The adminlte_chart component renders with Chart.js 4 (MIT). The tag name and props are the same as before; only the renderer changed. It builds the Chart.js config from type, series and categories and merges any options dict on top. Provide the data from your view:

# views.py
def dashboard(request):
    return render(request, "dashboard.html", {
        "series": [{"name": "Revenue", "data": [31, 40, 28, 51, 42, 109, 100]}],
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
        "colors": ["primary"],
    })

{% component "adminlte_chart" type="area" series=series categories=labels colors=colors height="300px" label="Monthly revenue" %}{% endcomponent %}

The component emits a <div data-chartjs data-chartjs-config="…"> holding a <canvas>. Upgraders: options now means Chart.js options; ApexCharts keys such as chart, xaxis, colors or legend are dropped with a DeprecationWarning.

Theme preset and dark mode

The look comes from assets/adminlte-charts.js, a theme preset that reads the Bootstrap colours and font from the page into Chart.defaults. Charts re-theme in place when the Light/Dark/Auto toggle, the text direction (RTL) or the Bootstrap colour variables change, and resize with their container. Page scripts that draw their own charts use the same module, which also exports chartColor(), verticalGradient() and withAlpha():

document.addEventListener("DOMContentLoaded", async () => {
  const { setupCharts, chartColor, verticalGradient } = await import("./adminlte-charts.js");
  const Chart = setupCharts(); // applies the AdminLTE preset, returns the Chart class
  new Chart(document.querySelector("#visitors canvas"), {
    type: "line",
    data: { labels, datasets: [{ data, fill: "origin",
      borderColor: () => chartColor("primary"),   // a function, so it follows the theme
      backgroundColor: verticalGradient("primary") }] },
  });
});

Give a hand-built <canvas> a sized, position: relative parent so it can resize.

Callbacks and Chart.js plugins

JSON cannot carry functions, so tooltip or tick formatters (and per-chart plugins) go in a listener for the adminlte:chart event, which the container fires with the chart instance once it exists:

document.addEventListener("adminlte:chart", ({ target, detail: { chart } }) => {
  if (target.id !== "sales") return;
  chart.options.plugins.tooltip.callbacks.label = (item) => `$${item.parsed.y}k`;
  chart.update();
});

To register a Chart.js plugin for every chart, call Chart.register(plugin) on the class that setupCharts() returns.

Data tables (Tabulator)

Pass columns plus either inline data or an api_url for server-side rows:

{% component "adminlte_datatable" columns=columns data=rows %}{% endcomponent %}

{# or load rows over AJAX #}
{% component "adminlte_datatable" columns=columns api_url="/api/contacts/" %}{% endcomponent %}

Vector maps (jsVectorMap)

{% component "adminlte_vector_map" map="world" markers=markers height="400px" %}{% endcomponent %}

Rich-text editor (Quill)

Bind a Django form field; the component emits a hidden input (the form value) plus a data-quill container that syncs HTML back to the input on change:

{% component "adminlte_editor" field=form.body placeholder="Write your post…" %}{% endcomponent %}

Drag-and-drop (SortableJS)

{% component "adminlte_sortable" group="tasks" %}
    <div class="card p-2 mb-2">Task A</div>
    <div class="card p-2 mb-2">Task B</div>
{% endcomponent %}

Node-free alternative (CDN)

If you run in "static" mode (no Vite), the plugin initializer and the theme preset aren't bundled (adminlte-charts.js imports chart.js/auto, so it needs the Vite build). Add any library from a CDN and initialise it in the page's extra_js block instead — the components still render valid markup you can target. For adminlte_chart, hand each container's JSON config to Chart.js (you get Chart.js' default look, without the AdminLTE preset or live dark mode):

{% block extra_js %}
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
    <script>
        document.querySelectorAll("[data-chartjs]").forEach((el) => {
            new Chart(el.querySelector("canvas"), JSON.parse(el.dataset.chartjsConfig));
        });
    </script>
{% endblock %}