apache / apache/echarts

Bar Graph: Hide/Show Labels automatically if enough space when zooming

Open
#11,166 3 comments 2 reactions 0 assignees View on GitHub
difficulty: normal en new-feature priority: high
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### What problem does this feature solve?
I have a bar graph (screenshots below) with few big entries an many small entries. It is not possible to display a label for every entry. There would be too many labels overlapping.
My current solution is to use label: formatter: p => p.value[1] > minLabelValue ? p.value[1] : '' in order to hide labels for values smaller than my defined minLabelValue.
However, when zooming in, those entries will of course not get displayed.

Users should only see relevant labels (without beeing distracted from man overlapping tiny ones). But when zooming in, these labels (as there is enough room) should appear.

### What does the proposed API look like?
an option like:
barMinHeightLabel: 10
could only show the label if there is enough room (at least 10 pixel) for it.
or even better
label: {
hideIfNotEnoughSpace: true
}

![LabelZoom1](https://user-images.githubusercontent.com/2234140/64238302-7adf9980-cefe-11e9-9f7b-47e6dfb7fad5.PNG)
When not zoomed, it looks like intended.
![LabelZoom2](https://user-images.githubusercontent.com/2234140/64238303-7adf9980-cefe-11e9-81ae-47a650cd2208.PNG)
But on zoom, label values should appear as they fit into the graph.

Contributor guide

Open the contributing guide

Research direction

No files, tests, or entry points are named in the issue. Start by clarifying whether the API should be a bar-specific minimum label height or a general label option, then define how available space is measured during zooming and what label visibility should be considered done.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
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.