react-native-svg-charts icon indicating copy to clipboard operation
react-native-svg-charts copied to clipboard

[Feature] Use react-native-vector-icons

Open ASchwad opened this issue 3 years ago • 1 comments

Description of feature

Is there are possibility to render react-native-vector-icons within a graph e.g. a LineChart?

For certain points in the graph, I would prefer an Icon over a Circle (from react-native-svg). However I am struggling to position the icon correctly.

Example: I would like to display icons instead of the blue rectangles - I can position the rectangle via the translateX and translateY control, but i cannot use those for react-native-vector-icons or the Icon component from react-native-elements.

<Rect
              translateX={x(value.predictionDate)}
              translateY={y(value.prediction)}
              fill="blue"
              width="8"
              height="
/>

grafik

Sorry in advance - this is probably more a question than a feature request. If i can solve it, i am happy to push a PR to the react-native-svg-charts-examples repo!

ASchwad avatar Dec 01 '21 11:12 ASchwad

I managed to use react-native-vector-icons in the PieChart by wrapping icon in each slice inside a react-native-svg ForeignObject. However I have rendering problems with the icon disappearing during rerenders

badaz avatar Jan 09 '22 07:01 badaz