Bar Chart with rounded corner by D3.js

I love D3.js and Data Viz. Recently I was wondering how to draw a rounded-corner bar chart. I found there are already some nice answer in StackOverflow.

• svg / d3.js rounded corner on one corner of a rectangle - Stack Overflow
• Rounded corner only on one side of svg - Stack Overflow

In brief, you can use <path> instead of <rect> when you want it to be rounded-corner. I wrote my CodePen sample as the replication.

<path>'s d attribute is like follow.

`
 M${x(item.name)},${y(item.value) + ry}
 a${rx},${ry} 0 0 1 ${rx},${-ry}
 h${x.bandwidth() - 2 * rx}
 a${rx},${ry} 0 0 1 ${rx},${ry}
 v${height - y(item.value) - ry}
 h${-x.bandwidth()}Z
`

rx and ry are the radii of the ellipse and you can change it as you like.

---

I've also created some examples using D3.js and React 😎
https://github.com/chooblarin/react-d3-example

Comments

[ramseyfeng]

The solution has an issue when you change the max value to a large value (e.g. 10000).
Try to set { name: "Richards", value: 10000}, and see the issue

[Charlie Taylor]

Nice work, I'm just learning d3 now want to get it working with react native.