Skip to main content
3 de 4
se añadieron 992 caracteres en el cuerpo
Robinson
  • 183
  • 12

Labels al top de graficos

Estoy realizando una grafica, usando Chart.js, funciona, ahora necesito ubicar el label que muestra la información dentro de la barra del grafico o arriba de este usando Chartjs-plugin-datalabels , uso la forma de la documentación, pero no me esta funcionando la configuración recomendada, de esta forma estoy construyendo el grafico:

function GraphCost() {
    var $datein = document.getElementById('datein_cost');
    var $dateout = document.getElementById('dateout_cost');
    var color = "#" + Math.floor(Math.random() * 16777215).toString(16);

    var chartExist = Chart.getChart("CostScrap_sf"); // <canvas> id
    if (chartExist != undefined)
        chartExist.destroy();//si canvas existe lo destruye 
    

    $.ajax({
        method: "GET",
        url: "../Reportes/GetScrapCost",
        contentType: "aplication/json; Charset=utf-8",
        data: { 'datein': $datein.value, 'dateout': $dateout.value },
        async: true,
        success: function (records) {
            Chart.register(ChartDataLabels);
            new Chart("CostScrap_sf", {
                type: "bar",
                data: {
                    labels: records.map(function (e) { return e.fecha }),
                    datasets: [{
                        label: 'Cost',
                        backgroundColor: color,
                        data: records.map(function (e) { return e.total })
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        title: {
                            display: true,
                            text: 'Scrap Cost from ' + $datein.value + ' to ' + $dateout.value
                        },
                        datalabels: {
                            color: 'black',
                            anchor: 'end',
                            align: 'top',
                            display: true,
                            font: {
                                weight: 'bold'
                            }
                        }
                    }
                }
            });
        }
    });
}

Se supondría que el atributo datalabels funcionaria para configurarlo, el resultado que espero es algo como esto:

introducir la descripción de la imagen aquí

Actualmente tengo esto: introducir la descripción de la imagen aquí

Gráficos antes de actualizar introducir la descripción de la imagen aquí

Gráficos después de actualizar introducir la descripción de la imagen aquí

Robinson
  • 183
  • 12