Charts & Plugins

Charts, calendars and maps are optional add-ons. Load them in the layout's javascripts (and stylesheets) blocks via CDN, then initialise them with a small inline script — exactly as the live demo's dashboard does.

The pattern

Override the block, keep the base assets with {{ parent() }}, add the plugin, then target an element you placed in body:

{% block body %}
    <twig:Adminlte:Card title="Revenue">
        <div id="revenue-chart"></div>
    </twig:Adminlte:Card>
{% endblock %}

ApexCharts

The demo dashboard renders its area chart and sparklines with ApexCharts:

{% block stylesheets %}{{ parent() }}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css">
{% endblock %}

{% block javascripts %}{{ parent() }}
    <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"></script>
    <script>
        const chart = new ApexCharts(document.querySelector('#revenue-chart'), {
            chart: { type: 'area', height: 300 },
            series: [{ name: 'Revenue', data: [31, 40, 28, 51, 42, 109, 100] }],
            xaxis: { categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul'] },
        });
        chart.render();
    </script>
{% endblock %}

FullCalendar

The demo calendar page wires up FullCalendar 6 the same way:

{% block javascripts %}{{ parent() }}
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.20/index.global.min.js"></script>
    <script>
        const el = document.getElementById('calendar');
        const calendar = new FullCalendar.Calendar(el, {
            initialView: 'dayGridMonth',
            headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek' },
        });
        calendar.render();
    </script>
{% endblock %}

jsVectorMap

The dashboard's world map uses jsvectormap:

{% block javascripts %}{{ parent() }}
    <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>
    <script>
        new jsVectorMap({ selector: '#world-map', map: 'world' });
    </script>
{% endblock %}

Other options

• UX Chart.js — install symfony/ux-chartjs for drop-in Chart.js charts (listed in the bundle's suggest section).
• UX Icons — install symfony/ux-icons to render Bootstrap Icons / Font Awesome inline via <twig:ux:icon>.