Crash when I click to datapoint doesn't have any value

[dumihi313]

Invariant Violation: [14769,"RCTView",131,{"position":"absolute","left":335,"top":"<>"}] is not usable as a native method argument

Untitled.2.mp4

[Abhinandan-Kushwaha]

Can you please share the code and data @dumihi313

[dumihi313]

My dataset:
dataSet: [{"data":[{"value":null,"label":"0"},{"value":null,"label":"1"},{"value":null,"label":"2"},{"value":null,"label":"3"},{"value":null,"label":"4"},{"value":null,"label":"5"},{"value":32,"label":"6","focusedDataPointRadius":4,"focusedDataPointColor":"rgba(60, 121, 245, 1)"},{"value":66.9182,"label":"7","focusedDataPointRadius":4,"focusedDataPointColor":"rgba(60, 121, 245, 1)"},{"value":32,"label":"8","focusedDataPointRadius":4,"focusedDataPointColor":"rgba(60, 121, 245, 1)"},{"value":66.9182,"label":"9","focusedDataPointRadius":4,"focusedDataPointColor":"rgba(60, 121, 245, 1)"},{"value":null,"label":"10"},{"value":null,"label":"11"},{"value":null,"label":"12"},{"value":null,"label":"13"},{"value":null,"label":"14"},{"value":null,"label":"15"},{"value":null,"label":"16"},{"value":null,"label":"17"},{"value":null,"label":"18"},{"value":null,"label":"19"},{"value":null,"label":"20"},{"value":null,"label":"21"},{"value":null,"label":"22"},{"value":null,"label":"23"},{"value":0,"label":"24"}],"color":"rgba(60, 121, 245, 1)","dataPointsColor":"rgba(60, 121, 245, 1)","startIndex":6,"endIndex":9},{"data":[{"value":null,"label":"0"},{"value":null,"label":"1"},{"value":null,"label":"2"},{"value":null,"label":"3"},{"value":null,"label":"4"},{"value":null,"label":"5"},{"value":32,"label":"6","focusedDataPointRadius":4,"focusedDataPointColor":"rgba(60, 121, 245, 0.6)"},{"value":64.4,"label":"7","focusedDataPointRadius":4,"focusedDataPointColor":"rgba(60, 121, 245, 0.6)"},{"value":32,"label":"8","focusedDataPointRadius":4,"focusedDataPointColor":"rgba(60, 121, 245, 0.6)"},{"value":64.2182,"label":"9","focusedDataPointRadius":4,"focusedDataPointColor":"rgba(60, 121, 245, 0.6)"},{"value":null,"label":"10"},{"value":null,"label":"11"},{"value":null,"label":"12"},{"value":null,"label":"13"},{"value":null,"label":"14"},{"value":null,"label":"15"},{"value":null,"label":"16"},{"value":null,"label":"17"},{"value":null,"label":"18"},{"value":null,"label":"19"},{"value":null,"label":"20"},{"value":null,"label":"21"},{"value":null,"label":"22"},{"value":null,"label":"23"},{"value":null,"label":"24"}],"color":"rgba(60, 121, 245, 0.6)","dataPointsColor":"rgba(60, 121, 245, 0.6)","startIndex":6,"endIndex":9},{"data":[{"value":null,"label":"0"},{"value":null,"label":"1"},{"value":null,"label":"2"},{"value":null,"label":"3"},{"value":null,"label":"4"},{"value":null,"label":"5"},{"value":32,"label":"6","focusedDataPointRadius":4,"focusedDataPointColor":"rgba(60, 121, 245, 0.3)"},{"value":61.88,"label":"7","focusedDataPointRadius":4,"focusedDataPointColor":"rgba(60, 121, 245, 0.3)"},{"value":32,"label":"8","focusedDataPointRadius":4,"focusedDataPointColor":"rgba(60, 121, 245, 0.3)"},{"value":61.88,"label":"9","focusedDataPointRadius":4,"focusedDataPointColor":"rgba(60, 121, 245, 0.3)"},{"value":null,"label":"10"},{"value":null,"label":"11"},{"value":null,"label":"12"},{"value":null,"label":"13"},{"value":null,"label":"14"},{"value":null,"label":"15"},{"value":null,"label":"16"},{"value":null,"label":"17"},{"value":null,"label":"18"},{"value":null,"label":"19"},{"value":null,"label":"20"},{"value":null,"label":"21"},{"value":null,"label":"22"},{"value":null,"label":"23"},{"value":null,"label":"24"}],"color":"rgba(60, 121, 245, 0.3)","dataPointsColor":"rgba(60, 121, 245, 0.3)","startIndex":6,"endIndex":9},{"data":[{"value":null,"label":"0"},{"value":null,"label":"1"},{"value":null,"label":"2"},{"value":null,"label":"3"},{"value":null,"label":"4"},{"value":null,"label":"5"},{"value":0,"label":"6","focusedDataPointRadius":4,"focusedDataPointColor":"rgba(3, 201, 136, 1)"},{"value":2.713,"label":"7","focusedDataPointRadius":4,"focusedDataPointColor":"rgba(3, 201, 136, 1)"},{"value":0,"label":"8","focusedDataPointRadius":4,"focusedDataPointColor":"rgba(3, 201, 136, 1)"},{"value":2.713,"label":"9","focusedDataPointRadius":4,"focusedDataPointColor":"rgba(3, 201, 136, 1)"},{"value":null,"label":"10"},{"value":null,"label":"11"},{"value":null,"label":"12"},{"value":null,"label":"13"},{"value":null,"label":"14"},{"value":null,"label":"15"},{"value":null,"label":"16"},{"value":null,"label":"17"},{"value":null,"label":"18"},{"value":null,"label":"19"},{"value":null,"label":"20"},{"value":null,"label":"21"},{"value":null,"label":"22"},{"value":null,"label":"23"},{"value":null,"label":"24"}],"isSecondary":true,"color":"rgba(3, 201, 136, 1)","dataPointsColor":"rgba(3, 201, 136, 1)","startIndex":6,"endIndex":9},{"data":[{"value":null,"label":"0"},{"value":null,"label":"1"},{"value":null,"label":"2"},{"value":null,"label":"3"},{"value":null,"label":"4"},{"value":null,"label":"5"},{"value":0,"label":"6","focusedDataPointRadius":4,"focusedDataPointColor":"rgba(3, 201, 136, 0.6)"},{"value":2.71,"label":"7","focusedDataPointRadius":4,"focusedDataPointColor":"rgba(3, 201, 136, 0.6)"},{"value":0,"label":"8","focusedDataPointRadius":4,"focusedDataPointColor":"rgba(3, 201, 136, 0.6)"},{"value":2.71,"label":"9","focusedDataPointRadius":4,"focusedDataPointColor":"rgba(3, 201, 136, 0.6)"},{"value":null,"label":"10"},{"value":null,"label":"11"},{"value":null,"label":"12"},{"value":null,"label":"13"},{"value":null,"label":"14"},{"value":null,"label":"15"},{"value":null,"label":"16"},{"value":null,"label":"17"},{"value":null,"label":"18"},{"value":null,"label":"19"},{"value":null,"label":"20"},{"value":null,"label":"21"},{"value":null,"label":"22"},{"value":null,"label":"23"},{"value":null,"label":"24"}],"isSecondary":true,"color":"rgba(3, 201, 136, 0.6)","dataPointsColor":"rgba(3, 201, 136, 0.6)","startIndex":6,"endIndex":9},{"data":[{"value":null,"label":"0"},{"value":null,"label":"1"},{"value":null,"label":"2"},{"value":null,"label":"3"},{"value":null,"label":"4"},{"value":null,"label":"5"},{"value":0,"label":"6","focusedDataPointRadius":4,"focusedDataPointColor":"rgba(3, 201, 136, 0.3)"},{"value":2.707,"label":"7","focusedDataPointRadius":4,"focusedDataPointColor":"rgba(3, 201, 136, 0.3)"},{"value":0,"label":"8","focusedDataPointRadius":4,"focusedDataPointColor":"rgba(3, 201, 136, 0.3)"},{"value":2.707,"label":"9","focusedDataPointRadius":4,"focusedDataPointColor":"rgba(3, 201, 136, 0.3)"},{"value":null,"label":"10"},{"value":null,"label":"11"},{"value":null,"label":"12"},{"value":null,"label":"13"},{"value":null,"label":"14"},{"value":null,"label":"15"},{"value":null,"label":"16"},{"value":null,"label":"17"},{"value":null,"label":"18"},{"value":null,"label":"19"},{"value":null,"label":"20"},{"value":null,"label":"21"},{"value":null,"label":"22"},{"value":null,"label":"23"},{"value":null,"label":"24"}],"isSecondary":true,"color":"rgba(3, 201, 136, 0.3)","dataPointsColor":"rgba(3, 201, 136, 0.3)","startIndex":6,"endIndex":9}]

My code:
{dataSet && (
<LineChart
key={renderChartWithDateKey}
maxValue={75}
dataSet={dataSet}
isAnimated={true}
spacing={32}
endSpacing={10}
noOfSections={4}
onlyPositive={true}
yAxisTextStyle={{ color: 'blue' }}
width={windowWidth - 100}
showYAxisIndices
yAxisIndicesColor={'transparent'}
yAxisIndicesWidth={10}
// showTextOnFocus={true}
// showDataPointLabelOnFocus={true}
// showStripOnFocus={true}
// focusEnabled={true}
stripColor={'gray'}
stripOpacity={0.5}
dataPointsWidth={4}
dataPointsRadius={2}
dataPointsHeight={4}
dataPointLabelWidth={100}
roundToDigits={2}
yAxisColor={'blue'}
yAxisThickness={2}
// showFractionalValues={true}
trimYAxisAtTop={true}
secondaryYAxis={{
maxValue: 6,
noOfSections: 6,
roundToDigits: 2,
yAxisTextStyle: {
color: 'green',
},
yAxisColor: 'green',
yAxisThickness: 2,
yAxisIndicesColor: 'transparent',
}}
xAxisIndicesHeight={10}
xAxisIndicesWidth={4}
pointerConfig={{

      pointerStripUptoDataPoint: false,
      pointerStripColor: 'lightgray',
      pointerStripWidth: 2,
      strokeDashArray: [2, 5],
      // pointerColor: 'lightgray',
      radius: 4,

      // pointerLabelWidth: 100,
      // pointerLabelHeight: 90,
      showPointerStrip: true,
      activatePointersOnLongPress: true,
      autoAdjustPointerLabelPosition: false,
      pointerColorsForDataSet: [
        theme.Colors.maxTempColor,
        theme.Colors.avgTempColor,
        theme.Colors.minTempColor,
        theme.Colors.maxVolColor,
        theme.Colors.avgVolColor,
        theme.Colors.minVolColor,
      ],
      //
      // pointerStripHeight: 120,

      // activatePointersOnLongPress: true,
      // autoAdjustPointerLabelPosition: false,
      // stripOverPointer: true,
      pointerVanishDelay: 1500,
      initialPointerAppearDelay: 5,
      activatePointersDelay: 600,
      // pointerEvents: 'auto',
      //
      pointerLabelComponent: (items1, items2, index) => {
        console.log('🚀 ~ items1:', items1)
        console.log('🚀 ~ items2:', items2)
        console.log('🚀 ~ index:', index)
        return renderDataPointLabelComponent(
          items1[0].value,
          items1[1].value,
          items1[2].value,
          items2[0].value,
          items2[1].value,
          items2[2].value,
        )
      },
    }}
  />
)}

[Abhinandan-Kushwaha]

@dumihi313
This has been fixed form versions 1.4.26 onwards. 🎉

Please use the latest version of the library.

[ftaibi]

I still have this issue with the latest version. When the data is empty the app crashes
I did not have this bug on the version 1.4.10