JesperLekland / react-native-svg-charts

📈 One library to rule all charts for React Native 📊
MIT License
2.33k stars 391 forks source link

[Feature] Use react-native-vector-icons #568

Open ASchwad opened 2 years ago

ASchwad commented 2 years ago

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!

badaz commented 2 years ago

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