CODEWITHSUNDEEP
javascriptjquerychart.js
dchadney
dchadney

Reputation: 283

Chart.js bar chart label gets hidden on hover

I have a bar chart with custom popups that also has a label over each bar. The problem is that when any bar is hovered over, all of the labels disappear. http://jsfiddle.net/s8yfqvdc/9/

I can't see anything in the documentation that would help me.

var context = document.getElementById('serviceLife').getContext('2d');

window.myObjBar2 = new Chart(context).Bar(barChartData2, {
    scaleOverride: true,
    scaleSteps: 10,
    scaleStepWidth: 10,
    scaleStartValue: 0,
    barShowStroke: false,
    barStrokeWidth: 0,
    barValueSpacing: 2,
    animation: false,
    responsive: true,
    tooltipTemplate: "<%if (label){%><%=label.tooltip%><%}%>",
    maintainAspectRatio: true,
    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);
            });
        })
    }
});

Upvotes: 1

Views: 2723

Answers (2)

dchadney
dchadney

Reputation: 283

I've spent a little time on this and solved the issue.

What I gathered from studying the extension...

I moved the onAnimationComplete function into .extend:

Chart.types.Bar.extend({
    name: "BarAlt",
    draw: function () {
    Chart.types.Bar.prototype.draw.apply(this, arguments);
            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);
            });
        })
    }
});

http://jsfiddle.net/s8yfqvdc/10/

Upvotes: 2

Sander Moolin
Sander Moolin

Reputation: 448

You'll probably have to create a simple extension, since this seems to be a known issue in Chart.js: see this answer.

Upvotes: 1

Related Questions