a way to show both primary and secondary data on the tooltip

[1mike12]

Describe the bug
Not really a bug, more a question / feature request. pointerLabelComponent exposes an array of datapoints I'm assuming indexed on each of the data arrays. But the data passed to secondaryData is not available

Expected behavior
I have a chart that shows depth on the main Y axis and a secondary Y on the right that will show arbitrary data, in this case, air pressure. It would be nice to be able to show both when hovering on the tooltip.

Screenshots
If applicable, add screenshots to help explain your problem.

• Version of the library being used ^1.3.6

[Abhinandan-Kushwaha]

Hi @1mike12 👋
Thanks for requesting this feature. It is now available in version 1.3.7🎉

The pointerLabelComponent now takes 2 parameters-

1. an array of items
2. secondaryDataItem

If the chart has secondaryData, the parameter secondaryDataItem will have the corresponding item from the secondaryData.

Here's an example showing how to use the secondaryDataItem (assuming the chart has secodaryData)-

pointerConfig={{
  pointerLabelComponent: (items,secondaryItem) => {
    return (
      <View
        style={{
          height: 120,
          width: 100,
          backgroundColor: '#282C3E',
          borderRadius: 4,
          justifyContent: 'center',
          paddingLeft: 16,
        }}>
        <Text style={{color: 'lightgray', fontSize: 12}}>{2018}</Text>
        <Text style={{color: 'white', fontWeight: 'bold'}}>
          {items[0].value}
        </Text>
        <Text style={{color: 'lightgray', fontSize: 12, marginTop: 12}}>
          {2019}
        </Text>
        <Text style={{color: 'white', fontWeight: 'bold'}}>
          {secondaryItem.value}
        </Text>
      </View>
    );
  },
}}

[1mike12]

@Abhinandan-Kushwaha thanks for the quick response, I actually can't seem to get this working. I keep receiving undefined from the chart that I pasted above. The secondary line renders, but the label will crash the app since trying to access secondaryItem.value doesn't work.

The other thing is that while trying to debug your changes and see what was happening, the entire chart stopped working for me because I receive the error.

Error: Exception in HostFunction: Malformed calls from JS: field sizes are different.

Was everything working on your end?

[1mike12]

Never mind I wiped out the app and reinstalled a 2nd time and everything worked again. 🤷 just RN things.