CODEWITHSUNDEEP
javascriptchartscross-browserd3.jstransition
grautur
grautur

Reputation: 30485

Bars in bar chart get smushed together

I'm trying to make bar charts in d3, but my bars get smushed together when I look at them in Chrome. (They look fine in Firefox or Safari.)

For example, they look like this:

enter image description here

when there should really be some whitespace in between the bars.

Strangely, I see this even in the official d3 tutorial, but only on some of the bar charts -- the first and fourth bar charts on that page have the correct amount of spacing, but the second and third bar charts are smushed like the chart above.

What's the fix for this, so that bars display correctly in Chrome? What's special about the first and fourth bar charts on that page?

Upvotes: 2

Views: 154

Answers (1)

Jason Davies
Jason Davies

Reputation: 4693

This can happen when using browser-based zoom, since a single pixel gap can collapse when zoomed out.

In Chrome, you need to select "View → Actual Size" or hit Ctrl/⌘-0 and this should fix it.

Upvotes: 3

Related Questions