react-nativevictory-chartsvictory-nativevictory-scatter

Customise the dataComponent of Victory Scatter to use the icon instead of default circle in React Native


I want to show icon on Victory Scatter instead of default circle in React Native. I tried using the below code, but the icon is being placed at the top left corner irrespective of any given x and y point. The icon is not getting placed based on the given x and y points. Need help to find the issue with my code to fix the bug.

Below is the code and screenshot.

import {Svg, Image} from 'react-native-svg'
class DataPoint extends React.Component {
  render() {
    const {x, y} = this.props
    return (
      <Svg x={x} y={y} width="20" height="20">
        <Image
          width="20"
          height="20"
          // eslint-disable-next-line max-len
          xlinkHref="https://s3.amazonaws.com/feedbackhouse-media-development/static/images/profie_image_placeholder/596e4f5df3be5b1ff99461c3"
        />
      </Svg>
    )
  }
}

 <VictoryScatter
        data={[
          {
            x: 100,
            y: 100
          }
        ]}
        dataComponent={<DataPoint />}
      />

Solution

  • here is a demo: https://snack.expo.io/@nomi9995/victory-native

    remove SVG wrapper around Image then it will work good.

    import React from "react";
    import { StyleSheet, View } from "react-native";
    import {
      VictoryChart,
      VictoryScatter,
    } from "victory-native";
    import {Image } from "react-native-svg";
    
    class DataPoint extends React.Component {
      render() {
        console.log(this.props, "nominomithis.props");
        const { x, y } = this.props;
        return (
          <Image
            x={x}
            y={y}
            width="20"
            height="20"
            // eslint-disable-next-line max-len
            xlinkHref="https://s3.amazonaws.com/feedbackhouse-media-development/static/images/profie_image_placeholder/596e4f5df3be5b1ff99461c3"
          />
        );
      }
    }
    
    export default class App extends React.Component {
      render() {
        return (
          <View style={styles.container}>
            <VictoryChart width={350}>
              <VictoryScatter
                data={[
                  {
                    x: 100,
                    y: 100,
                  }
                ]}
                dataComponent={<DataPoint />}
              />
            </VictoryChart>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
      },
    });
    
    

    enter image description here