How to add labels on top of the chart bar with Chart.js 2

Question

I need to apply labels on top of chart following the columns just like the image (the numbers aside the text 'Resultado mês'):

Image of the desired result

Some help please?

The page is bellow (the labels need to go before the legends). I've provided a HTML/CSS solution temporarily in the page bellow , but I'm waiting for the real solution:

http://www.pdagencia.com.br/porto/pages/10.3%20-%20consultar-dados-bancarios-01_v2.html#tab3

 window.onload = function() { var ctx = document.getElementById('ps-chart').getContext('2d'); var data = { labels: ["Jan/18", "Fev/18", "Mar/18", "Abr/18", "Mai/18", "Jun/18", "Jul/18", "Ago/18", "Set/18", "Out/18", "Nov/18", "Dez/18"], datasets: [{ label: "Entradas", data: [650, 590, 800, 810, 560, 550, 400, 800, 810, 560, 550, 400], backgroundColor: '#33bfff' }, { label: "Saídas", data: [-280, -480, -400, -190, -860, -270, -900, -400, -190, -860, -270, -900], backgroundColor: '#E75A5B' } ] } var myChart = new Chart(ctx, { type: 'bar', data: data, options: { responsive: false, plugins: { datalabels: { formatter: function(value, context) { return context.dataset.data[context.dataIndex].toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }); } } }, legend: { display: true, }, tooltips: { "enabled": false }, scales: { yAxes: [{ display: false, ticks: { display: false } }], xAxes: [{ stacked: true, barPercentage: 1.2, gridLines: { display: false } }] } } }); } 

 <script src="https://github.com/chartjs/Chart.js/releases/download/v2.7.2/Chart.bundle.min.js"></script> <script src="https://github.com/chartjs/chartjs-plugin-datalabels/releases/download/v0.3.0/chartjs-plugin-datalabels.min.js"></script> <canvas id="ps-chart" style="width:100%"></canvas> 

Answer 1

I am new to the chart js and javascript. As I have faced the same problem, I wanted to display the sum of two values into the label, I got some solution for the same as below. Maybe it can help you. Check it out: http://www.chartjs.org/samples/latest/tooltips/callbacks.html

      tooltips: {
                mode: 'index',
                callbacks: {
                    // Use the footer callback to display the sum of the items 
        showing in the tooltip
                    footer: function(tooltipItems, data) {
                        var sum = 0;

                        tooltipItems.forEach(function(tooltipItem) {
                            sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                        });
                        return 'Sum: ' + sum;
                    },
                },
                footerFontStyle: 'normal'
            },
            hover: {
                mode: 'index',
                intersect: true
            },