null or undefined value on line chart

[kingajohanna]

I'm trying to add value with null or undefined (I'm using ts), but I get an error (see below), and the lineDataItem's value's type is number, so how should this interpolation work? (https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/blob/master/docs/LineChart/LineChartProps.md#interpolation)

I'm using the latest version (1.4.29)

I want to show some extra x axis label, either with some values which are null or without any value, just the x axis label

the data:

const data = [{value: undefined}, {value: 1}, {value: 5 }, {value: 8}, {value: 12}, {value: 17}, {value: 12}, {value: 7}, {value: 5}, {value: 3}, {value: undefined}]

my code:

 <LineChart
        height={200}
        curved
        curveType={0}
        data={data} // contains element with value: null 
        spacing={CHART_WIDTH / data.length}
        color1={theme.colors.secondary}
        thickness={2}
        hideRules
        disableScroll
        dataPointsRadius1={0}
        xAxisLabelTextStyle={{ color: theme.colors.white }}
        xAxisLabelTexts={['5', '35', '65', '95', '125', '155', '185', '215', '245', '275', '305']}
        yAxisTextStyle={{ color: theme.colors.white }}
        yAxisColor={theme.colors.transparent}
        xAxisColor={theme.colors.transparent}
        yAxisLabelWidth={15}
        stepValue={stepNumber}
        overflowBottom={5}
        overflowTop={5}
        noOfSections={Math.ceil(maxValue / stepNumber) + numberOfExtraSections}
        pointerConfig={{
          pointerStripWidth: 2,
          strokeDashArray: [3, 5],
          pointerStripColor: theme.colors.secondary,
          pointerColor: theme.colors.secondary,
          pointerStripHeight: 160,
          radius: 4,
          pointerLabelWidth: 80,
          pointerLabelHeight: 50,
          activatePointersOnLongPress: true,
          autoAdjustPointerLabelPosition: false,
          pointerLabelComponent: (items: ChartData[]) => {
            return (
              <View style={styles.pointerContainer}>
                <Text style={styles.pointerText}>{items[0].value}</Text>
              </View>
            );
          },
        }}
      />

the errors:

Invariant Violation: [2043,"RCTView",{"width":59,"top":"<<Infinity>>"}] is not usable as a native method argument
Error: Exception in HostFunction: Malformed calls from JS: field sizes are different.

[[105,105,105,105,105,105,105,105,105,105,105,105,105,105,105,105,105,105,105,105,105,105,105,105,105,105,105,22],[2,2,2,2,2,2,2,2,2,2,2,4,2,2,2,2,2,2,2,2,2,2,2,2,4,4,4,0],[[2293,[],[],[],[],[1]],[2293,[],[],[],[],[1]],[2293,[],[],[],[],[1]],[2293,[],[],[],[],[1]],[2293,[],[],[],[],[1]],[2293,[],[],[],[],[1]],[2293,[],[],[],[],[1]],[2293,[],[],[],[],[1]],[2293,[],[],[],[],[1]],[2293,[],[],[],[],[1]],[2293,[],[],[],[],[1]],[2269,[],[],[],[],[1]],[2269,[],[],[],[],[1]],[2269,[],[],[],[],[1]],[2269,[],[],[],[],[1]],[2269,[],[],[],[],[1]],[2269,[],[],[],[],[1]],[2269,[],[],[],[],[1]],[2269,[],[],[],[],[1]],[2269,[],[],[],[],[1]],[2269,[],[],[],[],[1]],[2269,[],[],[],[],[1]],[2269,[],[],[],[],[1]],[2275,"RCTView",{"width":59}],[920,50,1723640606542,false]],3404]

Invariant Violation: [2269,"RCTScrollContentView",{"height":"<<NaN>>","width":39,"paddingBottom":"<<NaN>>"}] is not usable as a native method argument

Also I'm using typescript, and in the types, the null or undefined is not allowed for the data object's value.

[eulermomberger]

I'm stuck with this problem as well

[Abhinandan-Kushwaha]

Can you share the data along with the code @eulermomberger @kingajohanna

[kingajohanna]

@Abhinandan-Kushwaha I updated my question.

[fcamblor]

I get exactly the same kind of error when maxValue is set to 0 (seems a dupe of #430 which is marked as closed)

FYI, when I add a maxValue={maxValue === 0 ? 42 : maxValue} it solves the problem (with a totally random 42 value, don't do this at home :-) )