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
Oldest comments (2)
Nice work, I'm just learning d3 now want to get it working with react native.
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