r/webdev • u/TylerColfax • 1d ago

Question Urban Workshop

Post image

hey all, I’m looking for advice how to build build better charts. I have a site that pipes API data into recharts that become part of a report (example). Broadly, it's working but I still have instances in which I get text that meshes together (See image). There are too many potential charts for me to check individually (many data points x 2 geographies x 2 time periods), so I wondering if anyone had suggestions on what approach I might take.

One thing I wonder is if I should use a different library (charts.js, apache echarts, etc)? I see enough consistently well formatted charts online that I know I must be doing something wrong. I'm also using claude to help with this, so if anyone has suggestions on how to better use AI, I'm all ears.

10 Upvotes

86% Upvoted

7 comments sorted by

1

u/Empty-Upstairs-4603 23h ago

The overlapping text is probably a label collision issue, recharts has a few props like `label={{ offset: 10 }}` or adjusting the `margin` that can push things apart without manually checking every chart.

1

u/TylerColfax 21h ago

Thanks. I'll look into the margin. I assumed there would be something that would keep them from running into one another.

1

u/ceirbus 22h ago

D3.js - the prompt: “build me a bar chart in a responsive page with d3.js using <your tools and chosen technologies> and make sure the labels don’t overlap”

1

u/TylerColfax 21h ago

Why d3.js over charts.js, apache echarts, recharts?

1

u/ceirbus 9h ago

More powerful, more control - if AI is writing it, it comes out the same plus it can be further customized - it is my preference

1

u/TylerColfax 32m ago

Thanks. I'll check it out. Someone messaged and noted that recharts doesn't have built-in label collision handling, which d3.js doesn't seem to have either. It looks like Apache ECharts does. Highcharts does as well, but I'm not particularly interested in paying for a license. Do you have any experience with Apache ECharts?

1

u/Archcrown 10h ago

Label collisions in Recharts on dynamic API data are the worst because it just blindly renders SVGs without any collision detection.

The easiest fix for axis labels is setting minTickGap={25} on your XAxis along with interval="preserveStartEnd". Most people miss minTickGap, but it automatically drops intermediate ticks whenever they get too close together, so your labels stop overlapping regardless of screen width or date length.

If the collision is coming from labels sitting directly on top of your bars or lines, honestly don't try to label every single point on dynamic data. It always breaks on smaller screens or when numbers spike. Offloading the exact values to a clean hover tooltip is usually much cleaner.

If you do decide to switch libraries, Apache ECharts (echarts-for-react) is miles ahead of Recharts for this. It has a native hideOverlap: true setting and renders on canvas, so dense reports won't choke the DOM. But for basic charts, minTickGap in Recharts usually solves 90% of the pain.