react-vis icon indicating copy to clipboard operation
react-vis copied to clipboard

[Request] Support for SVG oval rectangles

Open MarcinPiekarniak opened this issue 5 years ago • 3 comments

Hello

I used your library in one of my projects. It's overall nice, easy to use and if you need something new you can easily customize it by writing new component extending AbstractSeries and if you understand all the features you can really make some complex looking graphs without writing any new code.

However there's lack of support for oval rectangles in SVG. I think it would be nice to have support for oval rectangles a lot of projects or design teams propose to use rectangles with slightly oval corners.

The only way you can make svg oval is by adding attributes cx, cy. So you can't style it by adding some className or style to data or props style with border-radius.

I needed oval rectangles and I ended up extending RectSeries/VerticalRectSeries/HorizontalRectSeries by overwriting existing ones with changing <rect /> to <rect cx, cy />.

Just a sidenote because someone might be overwriting AbstractSeries with typescript like I did and it took me some time to figure out how to do it. I ended up searching for react-vis.d.ts type file to be able to do stuff like class RectSeries extends AbstractSeries<RectSeriesProps> because with class RectSeries extends AbstractSeries typescript wouldn't recognize my classes usable inside of JSX.

MarcinPiekarniak avatar Mar 13 '19 09:03 MarcinPiekarniak

I am having a similar need, could you show how you ended up extending RectSeries/VerticalRectSeries/HorizontalRectSeries by overwriting existing ones with changing to <rect cx, cy /> ?

girlslearningcodeyul avatar Jan 07 '21 19:01 girlslearningcodeyul

Also curious on this -- did either of you have any Typescript example code for extending the AbstractBarSeries that you could share?

timtucker avatar Feb 27 '21 22:02 timtucker

@girlslearningcodeyul @timtucker That is my older account I barely use and I don't check emails that often(dedicated to commercial work for some company). I've managed to find old files and upload them to repo, it looks like I fixed cx,cy to 2,2

https://github.com/marcin-piekarniak/reactvis-OvalRectSeries

marcin-piekarniak avatar Feb 28 '21 11:02 marcin-piekarniak