chartjs / chartjs/Chart.BarFunnel.js

Jumping percentages above bars

Open
#11 0 comments 2 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
68
Forks
37
PR merge metrics
No merged PRs in 30d

Description

Just wanted to add that, if your chart has:

legend: {
display: false
}

It will cause the percentages above bars to jump (once the animation is complete and the user mouses over the bars)

I have found the solution is to modify chart.barFunnel.js and add at line 167:
ctx.textBaseline = 'top';

so it becomes:

if (dataset.data[index] > 0) {
// Draw Step Label
ctx.textBaseline = 'top';
tx.font = vm.stepLabelFontSize + "px " + options.defaultFontFamily;
ctx.fillStyle = vm.stepLabelColor;
ctx.textAlign = "center";
ctx.fillText(label.toFixed(0) + "%", vm.x, vm.y - vm.stepLabelFontSize);
}

This may be good to get into the next release!

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.