javascriptchart.jspareto-chart

Display values in Pareto chart using Chart.js 2.0.2


I have a Pareto chart (using Chart.js Version: 2.0.2) and i need to display values inside of the bars and under the line.

Any help will be very appreciated:

This is the code (hope that it is useful for somebody):

<canvas id="canvas"></canvas>

<script type="text/javascript">
    var data = {
        labels: ["8","7","9","11","10"],
        datasets: [{
            type: "line",
            label: "Acumulado",
            borderColor: "#BA1E14",
            backgroundColor: "#BA1E14",
            pointBorderWidth: 5,
            fill: false,
            data: [34.04,57.45,76.60,89.36,100.00],
            yAxisID: 'y-axis-2'
        },{
            type: "bar",
            label: "Asistencia",
            borderColor: "#56B513",
            backgroundColor: "#56B513",
            data: [16,11,9,6,5],
            yAxisID: 'y-axis-1'
        },{
            type: "bar",
            label: "SoluciĆ³n",
            borderColor: "#000FAA",
            backgroundColor: "#000FAA",
            data: [16,11,9,6,5],
            yAxisID: 'y-axis-1'
        }]
    };

    var options = {
        scales: {
            xAxes: [{
                stacked: true,
                scaleLabel: {
                    display: true,
                    labelString: "Estaciones"
                }
            }],

            yAxes: [{
                type: "linear",
                position: "left",
                id: "y-axis-1",
                stacked: true,
                ticks: {
                    suggestedMin: 0
                },
                scaleLabel: {
                    display: true,
                    labelString: "Minutos"
                }
            },{
                type: "linear",
                position: "right",
                id: "y-axis-2",
                ticks: {
                    suggestedMin: 0,
                    callback: function(value) {
                        return value + "%";
                    }
                },
                scaleLabel: {
                    display: true,
                    labelString: "Porcentaje"
                }
            }]
        }
    };

    window.onload = function() {
        var ctx = document.getElementById("canvas").getContext("2d");

        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: data,
            options: options
        });
    };
</script>

Right now the chart looks like this: enter image description here And i need it to look like this: enter image description here


Solution

  • This is the answer i developed (only in the options object):

    var options = {
        animation: {
            onComplete: function() {
                var ctx = this.chart.ctx;
                ctx.textAlign = "center";
                ctx.textBaseline = "middle";
    
                this.chart.config.data.datasets.forEach(function(dataset) {
                    ctx.font = "20px Arial";
                    switch (dataset.type) {
                        case "line":
                            ctx.fillStyle = "Black";
                            dataset.metaData.forEach(function(p) {
                                ctx.fillText(p._chart.config.data.datasets[p._datasetIndex].data[p._index], p._model.x, p._model.y - 20);
                            });
                            break;
                        case "bar":
                            ctx.fillStyle = "White";
                            dataset.metaData.forEach(function(p) {
                                ctx.fillText(p._chart.config.data.datasets[p._datasetIndex].data[p._index], p._model.x, p._model.y  + 20);
                            });
                            break;
                    }
                });
            }
        }
    ...
    };
    

    And this is the result:

    enter image description here