cómo mostrar valores de datos en Chart.js

Posterior a de una larga búsqueda de datos pudimos resolver esta dificultad que pueden tener ciertos los usuarios. Te brindamos la respuesta y esperamos serte de gran apoyo.

Solución:

Edición tardía: hay un complemento oficial para Chart.js 2.7.0+ para hacer esto: https://github.com/chartjs/chartjs-plugin-datalabels

Respuesta original:

Puede recorrer los puntos/barras enAnimationComplete y mostrar los valores

---

Avance

---

HTML

Texto

var chartData = 
    labels: ["January", "February", "March", "April", "May", "June"],
    datasets: [
        
            fillColor: "#79D1CF",
            strokeColor: "#79D1CF",
            data: [60, 80, 81, 56, 55, 40]
        
    ]
;

var ctx = document.getElementById("myChart1").getContext("2d");
var myLine = new Chart(ctx).Line(chartData, 
    showTooltips: false,
    onAnimationComplete: function () 

        var ctx = this.chart.ctx;
        ctx.font = this.scale.font;
        ctx.fillStyle = this.scale.textColor
        ctx.textAlign = "center";
        ctx.textBaseline = "bottom";

        this.datasets.forEach(function (dataset) 
            dataset.points.forEach(function (points) 
                ctx.fillText(points.value, points.x, points.y - 10);
            );
        )
    
);

var ctx = document.getElementById("myChart2").getContext("2d");
var myBar = new Chart(ctx).Bar(chartData, 
    showTooltips: false,
    onAnimationComplete: function () 

        var ctx = this.chart.ctx;
        ctx.font = this.scale.font;
        ctx.fillStyle = this.scale.textColor
        ctx.textAlign = "center";
        ctx.textBaseline = "bottom";

        this.datasets.forEach(function (dataset) 
            dataset.bars.forEach(function (bar) 
                ctx.fillText(bar.value, bar.x, bar.y - 5);
            );
        )
    
);

---

Violín – http://jsfiddle.net/uh9vw0ao/

Aquí hay una versión actualizada para Chart.js 2.3

23 de septiembre de 2016: Edité mi código para trabajar con v2.3 para ambos tipos de línea/barra.

Importante: Incluso si no necesita la animación, no cambie la opción de duración a 0, de lo contrario obtendrá chartInstance.controller no está definido error.

var chartData = 
    labels: ["January", "February", "March", "April", "May", "June"],
        datasets: [
            
                fillColor: "#79D1CF",
                strokeColor: "#79D1CF",
                data: [60, 80, 81, 56, 55, 40]
            
        ]
    ;

var opt = 
    events: false,
    tooltips: 
        enabled: false
    ,
    hover: 
        animationDuration: 0
    ,
    animation: 
        duration: 1,
        onComplete: function () 
            var chartInstance = this.chart,
                ctx = chartInstance.ctx;
            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';

            this.data.datasets.forEach(function (dataset, i) 
                var meta = chartInstance.controller.getDatasetMeta(i);
                meta.data.forEach(function (bar, index) 
                    var data = dataset.data[index];                            
                    ctx.fillText(data, bar._model.x, bar._model.y - 5);
                );
            );
        
    
;
 var ctx = document.getElementById("Chart1"),
     myLineChart = new Chart(ctx, 
        type: 'bar',
        data: chartData,
        options: opt
     );

Esta opción de animación funciona para 2.1.3 en un gráfico de barras.

Respuesta de @Ross ligeramente modificada

animation: 
duration: 0,
onComplete: function () 
    // render the value of the chart above the bar
    var ctx = this.chart.ctx;
    ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
    ctx.fillStyle = this.chart.config.options.defaultFontColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    this.data.datasets.forEach(function (dataset) 
        for (var i = 0; i < dataset.data.length; i++) 
            var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
            ctx.fillText(dataset.data[i], model.x, model.y - 5);
        
    );

---

---

Utiliza Nuestro Buscador