FormidableLabs / FormidableLabs/victory

Avoiding crowding of labels in VictoryLine chart

Open
#2,665 3 comments 2 reactions 0 assignees View on GitHub
Issue: Accepted Type: Enhancement :pencil2:
Dominant language
TypeScript
Stars
11.2k
Forks
536
PR merge metrics
No merged PRs in 30d

Description

**Describe the bug**
When a large dataset is plotted as a line chart, noticing that the tick labels for the data on the chart are overlapping with each other causing it to become obscure. Is there a way to avoid this issue? Can the library decide which labels to display without overlapping? Or, can we provide a set of labels to be displayed, like `tickValues` maybe?

**Victory version**
Which npm version are you using?
N/A

**Code**
This issue can be reproduced in the editable source present in [VictoryLine](https://formidable.com/open-source/victory/docs/victory-line#victoryline) chart with the below snippet:
```

`${datum.y}k`}
/>

```

**Expected behavior**
Victory should automatically and selectively render a limited set of labels that helps render the chart neatly, or, should accept it as a prop similar to `tickValues`.

**Screenshots**
![image](https://github.com/FormidableLabs/victory/assets/44050820/b0bf2ee2-f716-4571-892e-d97d8d0a1522)

**Additional context**
Another observation from this example is that some labels like `0k` are overlapping with the y-axis line, which shouldn't happen. Although the position of the labels can be adjusted manually, I feel this should be taken care of automatically by the library.
![image](https://github.com/FormidableLabs/victory/assets/44050820/e5ccb5ec-3713-4a10-bc78-12e36470eb11)

Any inputs are appreciated!

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.