API to use chart components directly? about react-vis HOT 5 CLOSED

Indeed there's no easy way to do this now. Yes, you'd need to use those methods to set up the correct scales for the series children on your SVG.

One reason we're taking control of the SVG is to be able to handle mouse events within the SVG element.

We might need to revisit this later to allow others to easily use Series components in their own SVG components, perhaps through exposing a higher order component that does these cloning/scale calculations and provide the relevant scales to the wrapped component.

Also, propTypes for LineSeries are documented via AbstractSeries right now: https://github.com/uber-common/react-vis/blob/master/src/lib/plot/series/abstract-series.js#L35

from react-vis.

Thanks for the helpful answer. Will try to investigate the higher order component or another approach, but it sounds like it may be a bit wide-scoping for a simple PR. Feel free to close this or tag as feature request or something in the mean time.

from react-vis.

Please do share your findings! I'll leave this open for discussion and so that others are aware of the issue. Thanks for opening the issue.

I was thinking the higher order component approach would be great to also extract out some of the logic that's deep inside XYPlot.

from react-vis.

I think another approach would be to enable an svg only mode on XYPlot. That way we can still scale our series and run all of our handlers, but serve up an embeddable svg.

This would also enable us to be super slick and deeply nest our components! For instance, imagine I wanted to layout a small multiple of pie charts, and I wanted it to be pure SVG. (So that i could crowbar it out and drop it into sketch say). Example API

<XYPlot ....>
<RadialChart xPosition={10} yPosition={10} data={myData}/>
<RadialChart xPosition={10} yPosition={20} data={myData2}/>
...
</XYplot>

from react-vis.

We have no plan to do that for now but feel free to submit a PR.

from react-vis.