CODEWITHSUNDEEP
javascriptd3.js
Coder1000
Coder1000

Reputation: 4491

Why is my Bar Chart inverted?

CODEPEN:

https://codepen.io/anon/pen/dWXBeZ

QUESTION:

It seems my D3 Bar Chart data is inversed and the bars do not cover the full height of the chart.

How can I properly scale the bars ?

Something is wrong with my xScale and yScale I think.

Upvotes: 0

Views: 65

Answers (1)

raheel
raheel

Reputation: 1415

I believe you need to subtract the height outside of applying the yScale. For example, instead of:

.attr("y", (d, i) => yScale(h - d[1]))

.attr("y", (d, i) => h - yScale(d[1]))

or rather, in your case with padding:

.attr("y", (d, i) => h - padding - yScale(d[1]))

Apply the same fix to text's y positioning.

Upvotes: 2

Related Questions