Error when using `useLineChart()` or `LineChart.useChart()` hook with `<LineChart.Group>`

[evansendra]

Using a <LineChart.Group> with multiple <LineChart id="..."> children is fine. However when moving the <LineChart id="..."> components into a child component so they have access to the <LineChart.Provider data={{ ... }}>, it seems that the id is missing from within the hooks:

ERROR  [react-native-wagmi-charts] Missing data "id" prop on LineChart. You must pass an id prop to <LineChart /> when using a dictionary for your data.

This error disappears when the hook is removed. Is it a setup issue in how I'm using the hook with multiple line charts? @nandorojo I think you originally added this feature in #31 if you have any guidance it would be much appreciated 🙏

Repo to demonstrate issue: https://github.com/evansendra/wagmi-multichart-example

[nandorojo]

I think the children are getting mapped so avoid abstracting it into its own component. Haven't used this in a long time though so I forget tbh

[evansendra]

Thanks for your super quick reply @nandorojo. I think without that abstraction it becomes impossible to use the hooks based on https://github.com/coinjar/react-native-wagmi-charts?tab=readme-ov-file#hooks:

"The following hooks are only accessible inside the LineChart.Provider or CandlestickChart.Provider"

Will dig into it a bit more to see what's happening within the library when it checks for IDs

[nandorojo]

I think you can check the source it should be an easy fix, I might also be wrong

[evansendra]

Yep it was an easy fix and my incorrect hook usage. Looking into the source a bit the line chart hooks have to be used within children of <LineChart> in order to have IDs correctly provisioned. Will add some code in this comment for an example in case I delete the example repo later.

App.tsx

```tsx import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View } from 'react-native'; import Chart from "./Chart"; export default function App() { return ( ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); ```

Chart.tsx

```tsx import {LineChart, useLineChart} from 'react-native-wagmi-charts'; import {GestureHandlerRootView} from "react-native-gesture-handler"; import {curveLinear} from "d3-shape"; import {useState} from "react"; import {runOnJS, useAnimatedReaction} from "react-native-reanimated"; import {View} from "react-native"; const data = [ { timestamp: 1625945400000, value: 33575.25, }, { timestamp: 1625945850000, value: 33565.25, }, { timestamp: 1625946300000, value: 33545.25, }, { timestamp: 1625946750000, value: 33535.25, }, { timestamp: 1625947200000, value: 33510.25, }, { timestamp: 1625948100000, value: 33215.25, }, ]; const data2 = data.map((point, idx, arr) => { return arr[arr.length - 1 - idx]; }); const LineChartOne = function LineChartOne() { return ( <> ) } const LineChartTwo = function LineChartTwo() { const [textWidth, setTextWidth] = useState(0); const [xDisplacement, setXDisplacement] = useState(0); const { currentX, isActive } = LineChart.useChart(); useAnimatedReaction(() => currentX.value, () => { console.log(`x: `, currentX.value); runOnJS(setXDisplacement)(currentX.value); }); const onTextLayout = (e: any) => { setTextWidth(e.nativeEvent.layout.width); } return ( <> ) } const ChartData = function ChartData() { return ( ) } const Chart = function Chart() { return ( ); } export default Chart; ```