DEV Community 👩‍💻👨‍💻

Sota Hatakeyama
Sota Hatakeyama

Posted on

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.

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(},${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}

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 😎

Top comments (2)

ramseyfeng profile image

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

charlietcoder profile image
Charlie Taylor • Edited on

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

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.