Chartjs-Chart JS attempt to stacked bar chart tooltip for only one dataset

1👍

You can extend your chart to do this.


Preview

enter image description here


Script

Chart.types.Bar.extend({
    name: "BarAlt",
    draw: function () {
        Chart.types.Bar.prototype.draw.apply(this, arguments);

        var ctx = this.chart.ctx;
        var scale = this.scale;

        ctx.save();
        ctx.fillStyle = 'black';
        this.datasets[0].bars.forEach(function (bar, i) {
            if (bar.value != 0) {
                ctx.beginPath();
                ctx.moveTo(bar.x - bar.width / 2, bar.y);
                ctx.lineTo(bar.x + bar.width / 2, bar.y);
                ctx.lineTo(bar.x + bar.width / 2, scale.startPoint);
                ctx.lineTo(bar.x - bar.width / 2, scale.startPoint);
                ctx.closePath();
                ctx.fill();
            }
        })
        ctx.restore();
    }
});

and then

window.myBar = new Chart(ctx).BarAlt(barChartData, {
    ...

You can change the tooltipFillColor if you feel that the tooltip doesn’t stand out from the black background.


Fiddle – http://jsfiddle.net/o0geemtp/

Leave a comment