0

Preciso colocar uma legenda em um gráfico do chart.js, porém não estou conseguindo fazer isso.

Alguém sabe como faço?

<div class="flex-conteiner2">
        <canvas id="myChart3" width="900" ; height="400"></canvas>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
        <script>
            var ctx = document.getElementById('myChart3').getContext('2d');
            var chart = new Chart(ctx, {
                type: 'line',

                data: {
                    labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
                    datasets: [{
                        lineTension: 0,
                        label: '2020',
                        backgroundColor: 'transparent',
                        borderColor: '#69b360',
                        data: [4, 5, 1, 2, 3, 4, 1, 4, 3, 5, 2, 4]
                    },
                    {
                        lineTension: 0,
                        label: '2019',
                        backgroundColor: 'transparent',
                        borderColor: ' #b25252',
                        data: [4, 2, 5, 3, 3, 1, 4, 3, 2, 4, 2, 3]
                    }]
                },

                options: {
                    legend: {
                        display: true,
                        position: "bottom",
                        labels: {
                            generateLabels: function (chart) {
                                ['Muito Insatisfeito', 'Pouco Insatisfeito', 'neutro', 'Pouco Satisfeito', 'Muito Satisfeito']

                            },
                        },
                    },
                },
            });
        </script>

1 Resposta 1

0

Para gerar a legenda, precisa retornar um objeto do tipo LegendItem, veja a documentação com a definição da Interface: https://www.chartjs.org/docs/latest/configuration/legend.html#legend-item-interface

Ou seja:

{
    // Label that will be displayed
    text: string,

    // Fill style of the legend box
    fillStyle: Color,

    // If true, this item represents a hidden dataset. Label will be rendered with a strike-through effect
    hidden: boolean,

    // For box border. See https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap
    lineCap: string,

    // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
    lineDash: number[],

    // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
    lineDashOffset: number,

    // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
    lineJoin: string,

    // Width of box border
    lineWidth: number,

    // Stroke style of the legend box
    strokeStyle: Color,

    // Point style of the legend box (only used if usePointStyle is true)
    pointStyle: string | Image,

    // Rotation of the point in degrees (only used if usePointStyle is true)
    rotation: number
}

Então precisa retornar um objeto desse tipo. O texto da legenda por exemplo é o "text":

return new { text: "Muito Insatisfeito" };

Mas o método recebe por parâmetro os dados do gráfico (chart). Na variável "chart" pode ler o chart.data.labels, e retonar os objetos com os labels corretos.

Veja esse exemplo:

generateLabels(chart) {
    const data = chart.data;
    if (data.labels.length && data.datasets.length) {
        return data.labels.map((label, i) => {
            const meta = chart.getDatasetMeta(0);
            const style = meta.controller.getStyle(i);

            return {
                text: label,
                fillStyle: style.backgroundColor,
                strokeStyle: style.borderColor,
                lineWidth: style.borderWidth,
                hidden: !chart.getDataVisibility(i),

                // Extra data used for toggling the correct item
                index: i
            };
        });
    }
    return [];
}

Ou seja, para cada label, vai returnar um objeto com os dados no formato daquela interface que coloquei acima. Esse exemplo foi tirado da documentação: https://github.com/chartjs/Chart.js/blob/master/src/controllers/controller.polarArea.js#L48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .