React-native-chart-kit: Unable to show line chart decorator on react-native-web

[marinimau]

Unable to show line chart decorator on react-native-web. I've tried to render the decorator component using 'react-native-svg-web' instead of 'react-native-svg' but the problem remains. N.B. 'onDataPointClick' works correctly on web if I try to print debug text.

[Amacelia]

any code detailing the issue?

[marinimau]

The following code is inside the <LineChart ... /> component:

decorator={this.decorator}

onDataPointClick={(data) => {

                        let isSamePoint = (this.state.x === data.x
                            && this.state.y === data.y);

                        isSamePoint ?
                            this.setState({x: data.x, value: data.value, y: data.y, visible: !this.state.visible})
                            :
                            this.setState({x: data.x, value: data.value, y: data.y, visible: true});

                    }}

Where this.decorator is a function, the following:

decorator = () => {
        console.log('pressed a point');  // works in web browser too
        return this.state.visible ?
            <LineChartDecorator color={this.props.color} x={this.state.x} y={this.state.y}
                                value={this.state.value}/> : null
    }

and the <LineChartDecorator> component is this:

import {Circle, Line, Svg, Text as TextSVG} from "react-native-svg";
import darkMode from "../../ui/theme/darkModeDetector";
import Colors from "../../ui/theme/colors";
import {View, Dimensions} from "react-native";
import React, {Component} from "react";

class LineChartDecorator extends Component{

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={{zIndex: 999}}>
                <Svg>
                    <Line
                        x1={this.props.x}
                        y1="0"
                        x2={this.props.x}
                        y2="190"
                        stroke={(darkMode() ? Colors.darkMode_basicTransparent : Colors.basicTransparent)}
                        strokeWidth="1"/>
                    <Circle
                        cx={this.props.x}
                        cy={this.props.y}
                        r="5"
                        fill={this.props.color}/>
                    <TextSVG
                        x={this.props.x - 20}
                        y={this.props.y - 5}
                        fill={(darkMode() ? Colors.darkMode_basic : Colors.basic)}
                        fontSize="14"
                        fontWeight="bold"
                        textAnchor="middle">
                        {this.props.value.toLocaleString('it')}
                    </TextSVG>
                </Svg>
            </View>
        );
    }
}

export default LineChartDecorator;

The decorator works properly on Android and iOS apps, but not on the web.

[redsuperbat]

I am also having this issue but on IOS. Tooltip renders fine on android but does not show on IOS nor throws any sort of error. Here is my decorator function:

  decorator={() => {
            const boxColor = "rgba(0,0,0,0.7)";
            return tooltipPos.visible ? (
              <View style={{ zIndex: 999 }}>
                <Svg height="100" width="100">
                  <Rect
                    x={tooltipPos.x - 15}
                    y={tooltipPos.y + 10}
                    fill={boxColor}
                    width="50"
                    height="28"
                  />
                  <TextSVG
                    x={tooltipPos.x + 10}
                    y={tooltipPos.y + 22}
                    fill="white"
                    fontSize="12"
                    fontWeight="bold"
                    textAnchor="middle"
                  >
                    {tooltipPos.value.data}
                  </TextSVG>
                  <TextSVG
                    x={tooltipPos.x + 10}
                    y={tooltipPos.y + 32}
                    fill="white"
                    fontSize="8"
                    fontWeight="bold"
                    textAnchor="middle"
                  >
                    {tooltipPos.value.date}
                  </TextSVG>
                  <Polygon
                    points="5,0 9,9 0,9"
                    fill={boxColor}
                    x={tooltipPos.x - 5}
                    y={tooltipPos.y + 1}
                  />
                </Svg>
              </View>
            ) : null;
          }}

[redsuperbat]

Solved it by removing the height and width props of the <Svg> element.

[marinimau]

If the problem is on iOS, it is another problem. The issue was in the rendering of the decorator component only for react-native-web. I've solved using React fragment as root of decorator component.

[redsuperbat]

Yea should probably have created another issue. However if someone encounters this issue in the future this thread will probably be a good help for both IOS and web. =)