DEV Community

loading...

Bar Chart with rounded corner by D3.js

Sota Hatakeyama
I love JavaScript
・1 min read

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.

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

Discussion (2)

Collapse
ramseyfeng profile image
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

Collapse
charlietcoder profile image
Charlie Taylor • Edited

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