# Dashboard 2 - Pie chart labels visibility without hover

**URL:** <https://discourse.nodered.org/t/dashboard-2-pie-chart-labels-visibility-without-hover/94452>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [8 January 2025 11:53 UTC](https://discourse.nodered.org/t/dashboard-2-pie-chart-labels-visibility-without-hover/94452 "2025-01-08T11:53:21Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![P.Macak](https://avatars.discourse-cdn.com/v4/letter/p/278dde/32.png) [@P.Macak](https://discourse.nodered.org/u/P.Macak)\
**Post date:** [8 January 2025 11:53 UTC](https://discourse.nodered.org/t/dashboard-2-pie-chart-labels-visibility-without-hover/94452/1 "2025-01-08T11:53:21Z")

</div>

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?

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [7 February 2025 11:54 UTC](https://discourse.nodered.org/t/dashboard-2-pie-chart-labels-visibility-without-hover/94452/2 "2025-02-07T11:54:15Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.