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(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

Top comments (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 on

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

12 Gorgeous UI Components for Your Design Inspiration

12 Gorgeous UI components for your design inspiration: cards, text, buttons, checkboxes, icons, loaders and menus.