Customize bar shape to have a triangular edge.

[nehakhands]

Hi,

I am looking at the Customize bar shape to achieve a triangular edge to one end of a bar. I can easily achive rounded edge but failing to understand the calculation used in here to customize the bar shape https://codesandbox.io/s/bar-chart-with-customized-shape-dusth. Please see the attached image for reference

Can I get help in understanding how can i achieve a customized bar shape with a triangular edge ?

Many thanks

[ckifer]

Hi, in order to understand how that custom path is drawn you'll have to understand SVGs. I find this guide pretty helpful to get started https://css-tricks.com/svg-path-syntax-illustrated-guide/

[ckifer]

But in this case, you can use the Polygon shape to achieve what you want.

See this storybook story as an example https://master--63da8268a0da9970db6992aa.chromatic.com/?path=/story/api-shapes-polygon--using-connect-nulls

And going off of that you can produce something like
https://codesandbox.io/s/bar-chart-with-customized-shape-forked-cyghk4?file=/src/App.tsx

By using the coordinates and a few simple calulations

[nehakhands]

Thank you so much for your help.

[ckifer]

No problem