Place a caption on a Chart.js chart

Question

I need to put a caption on a Chart.js chart, but I’m not able to do that.

Does anyone know how I do?

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

Answer 1

To generate the caption, you need to return an object of the type LegendItem, see the documentation with the definition of Interface: https://www.chartjs.org/docs/latest/configuration/legend.html#Legend-item-interface

That is to say:

{
    // 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
}

Then you need to return an object of this type. The caption text for example is "text":

return new { text: "Muito Insatisfeito" };

But the method receives by parameter the chart data (chart). In the variable "Chart" you can read the chart.data.labels, and resume objects with the correct Bees.

Take this example:

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 [];
}

That is, for each label, it will returnate an object with the data in the format of that interface I put above. This example was taken from the documentation: https://github.com/chartjs/Chart.js/blob/master/src/controllers/controller.polarArea.js#L48