chartjs / chartjs/chartjs-plugin-datalabels

Feature Request: option to handle when label cannot fit inside a bar

Open
#395 1 comment 8 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
920
Forks
507
PR merge metrics
No merged PRs in 30d

Description

I have a bar chart (horizontal in this case, but vertical would be the same thing) where I want the labels to sit right inside the end (right or top) of the bar.

So I use `anchor: 'end'` and then `position: 'left'` (or `position: 'start'`). For most bars, this works fine. But if a bar is rendering quite short, then the label looks ugly overlapping the axis, and possibly even being cut off. So in those cases, I want the label outside the bar, with `anchor: 'end'` and `position: 'right'` / `position: 'end'`.

I've tried defining `align` as a function, so I can programmatically give different values. The problem is, I can't really reliably "compute" whether the label could fit or not. The context object that's passed in gives me the plotted dataset value, but it doesn't really tell me the relative dimensions of the bar versus the label.

A solution that might work is to be able to pass an array of values, like `position: [ 'left', 'right' ]` or `position: [ 'start', 'end' ]`, and the library tries to position with the first value, and if it doesn't fit, or overlaps, or whatever... then it tries the next value, and so on.

Even more simply, maybe n `position: 'auto'` could cycle from `'left'` > `'center'` > `'right'` (or `'start'` > `'center'` > `'end'`), trying each position until the label can fit?

Contributor guide

No contributing guide indexed for this repository

Research direction

No source file or test is named. Start by tracing how the position, anchor, and align options are handled, then define how fallback choices should behave when a label cannot fit; done means the supported behavior and edge cases are specified and verified.

Written by the indexing model from the issue text.

Assessment

Tech stack
chart.js, javascript
Domain
data-visualization
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.