Dashboard 2 - Pie chart labels visibility without hover

Dashboard
1

Hello colleagues,

I'm trying to create Pie chart from ui_template widget in Dashboard 2, but I'm unable to make it work. Code below work only for older Dashboard pallete, but not for 2.0. Any ideas how to correct it?

<div style="width: 100%; text-align: center;">
    <canvas id="myPieChart" style="max-width: 500px; margin: auto;"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>

<script>
(function(scope) {
    let chart; // Uložíme instanci grafu

    // Sledujeme příchozí data
    scope.$watch('msg.payload', function(data) {
        if (!data || !Array.isArray(data)) return;

        const labels = data.map(item => item.label);
        const values = data.map(item => item.value);
        const colors = [
            '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40'
        ]; // Paleta barev

        const ctx = document.getElementById('myPieChart').getContext('2d');

        // Pokud graf už existuje, zničíme ho před vytvořením nového
        if (chart) chart.destroy();

        chart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: labels,
                datasets: [{
                    data: values,
                    backgroundColor: colors,
                    hoverBackgroundColor: colors
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false, // Umožní dynamickou velikost
                plugins: {
                    legend: {
                        display: true, // Pokud chcete zobrazit legendu
                        position: 'top'
                    },
                    datalabels: {
                        color: '#fff', // Barva textu uvnitř grafu
                        font: {
                            size: 14,
                            weight: 'bold'
                        },
                        formatter: (value, ctx) => {
                            return value; // Zobrazí hodnotu uvnitř segmentu
                        },
                        align: 'center', // Umístění do středu segmentu
                        anchor: 'center' // Text je ukotven uprostřed
                    }
                }
            },
            plugins: [ChartDataLabels] // Aktivujeme datalabels plugin
        });
    });
})(scope);
</script>