React-native-windows: How do I display graphs in a view?

[gat786]

For showing some telemetry stuff we are trying to embed graphs and charts inside a rnw app. We know that d3js can do that with web react. But we didn't find any way of doing something like that with react-native-windows. It would be great help if there are some suggestions

[asklar]

hi @gat786 we don't have any graph controls built into RNW but you could either:

• build your own using existing primitives
• add support to an existing react native community module

as far as native UI libraries that can work well in RNW, anything that works with UWP XAML should work out of the box, so e.g. Telerik has a UWP UI library that has chart controls, see if that fulfills your needs. Once you identify the native control you'll be wrapping you can follow the documentation on our website about wrapping native controls as javascript ViewManagers in https://microsoft.github.io/react-native-windows/docs/view-managers

[asklar]

Another option would be to use d3 inside of react-native-webview

[gat786]

Alright thanks,
Although it is said in the release notes that svg source is supported natively I wasn't able to get it working.

Is there a sample which shows how I should use it?

[asklar]

@gat786 RNW currently supports an .svg format files used in an Image component, but support for the full react-native-svg library is not there yet.