Line Chart Maximum Update Depth Exceeded

[lindoncamaj]

Description

Hello, I have a line chart in my app that I would like to be clickable, but it appears I have an issue where the component keeps rendering/updating when clicked upon. At first I thought it had to do with setting state in the component so I removed it, but I am finding it behaving the same way even when the code is commented out. I assume the mistake I am making is something really small, as I am getting confused. Any help is truly appreciated! Please let me know if further clarification is needed.

Code:

            <LineChart
                dataSet={Array.isArray(data)? data: []}
                noOfSections={5}
                // rotateLabel
                width={width*.84}
                height={height*0.37}
                // disableScroll
                adjustToWidth
                hideDataPoints
                // spacing={10}
                color="#00ff83"
                thickness={2}
                // startFillColor="rgba(20,105,81,0.3)"
                // endFillColor="rgba(20,85,81,0.01)"
                // startOpacity={0.9}
                // endOpacity={0.2}
                initialSpacing={0}
                // maxValue={600}
                yAxisColor="white"
                yAxisThickness={0}
                rulesType="solid"
                rulesColor="gray"
                yAxisTextStyle={{color: 'gray'}}
                xAxisColor="lightgray"

                pointerConfig={{
                    pointerStripColor: 'lightgray',
                    pointerStripWidth: 2,
                    pointerColor: 'lightgray',
                    radius: 6,
                    // pointerLabelWidth: 100,
                    // pointerLabelHeight: 90,
                    activatePointersOnLongPress: true,
                    autoAdjustPointerLabelPosition: false,
                    // shiftPointerLabelY: -20,
                    // pointerComponent: useCallback((items: LineData, index: number) => {
                    //     if (items.date !== currentDate) {
                    //         setCurrentDate(items.date);
                    //     }
                    //     if (items.value !== currentValues[items.name]) {
                    //         const curVals: {} = {};
                    //         for (let x in currentValues) {
                    //             if (x === items.name) {
                    //                 curVals[items.name] = items.value;
                    //             } else {
                    //                 curVals[x] = currentValues[x]
                    //             }
                    //         }
                    //         setCurrentValues(curVals);
                    //     }
                    //     console.log(items)
                    //     console.log(index)
                    // }, []),
                    // pointerLabelComponent: pointerLabelComponent,
                    pointerLabelComponent: items => {
                        console.log(items);
                        return (<></>);
                        // console.log(items)
                        // setCurrentDate(items[0].date);
                        // let curVals = {};
                        // items.map(item => {
                        //     curVals[item.name] = item.value
                        // })
                        // setCurrentValues(curVals);
                        // console.log(curVals);
                        // return(<></>);
                        // return (
                        //     <ThemedView
                        //         style={{
                        //             height: 90,
                        //             width: 100,
                        //             justifyContent: 'center',
                        //             marginTop: -30,
                        //             marginLeft: -40,
                        //         }}
                        //     >
                        //         <Text style={{color: 'white', fontSize: 14, marginBottom:6,textAlign:'center'}}>
                        //             {items[0].date}
                        //         </Text>

                        //         <ThemedView style={{paddingHorizontal:14,paddingVertical:6, borderRadius:16, backgroundColor:'white'}}>
                        //             <Text style={{color: items[0].color}}>{items[0].name}</Text>
                        //             <Text style={{fontWeight: 'bold',textAlign:'center'}}>
                        //             {items[0].value + ' PSI'}
                        //             </Text>
                        //         </ThemedView>
                        //     </ThemedView>
                        // );
                    },
                }}
            />

(PS, the themed view is just like the regular view but styling is set)

Steps to reproduce

Using the code included above.

Snack or a link to a repository

No response

version of react-native-gifted-charts

1.4.74

React Native version

0.81.4

Platforms

Android

Workflow

None

[lindoncamaj]

I think this specifically has to do with using dataSet, but am unsure why this would be an issue

[lindoncamaj]

Also, this is what the error says:
Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

[lindoncamaj]

import { Text, View } from "react-native";
import { BarChart, LineChart } from "react-native-gifted-charts";
export default function test() {
const stackData = [
{
stacks: [
{value: 10, color: 'orange'},
{value: 20, color: '#4ABFF4', marginBottom: 2},
],
label: 'Jan',
},
{
stacks: [
{value: 10, color: '#4ABFF4'},
{value: 11, color: 'orange', marginBottom: 2},
{value: 15, color: '#28B2B3', marginBottom: 2},
],
label: 'Mar',
},
{
stacks: [
{value: 14, color: 'orange'},
{value: 18, color: '#4ABFF4', marginBottom: 2},
],
label: 'Feb',
},
{
stacks: [
{value: 7, color: '#4ABFF4'},
{value: 11, color: 'orange', marginBottom: 2},
{value: 10, color: '#28B2B3', marginBottom: 2},
],
label: 'Mar',
},
];

const data1 = [
    {value: 70},
    {value: 36},
    {value: 50},
    {value: 40},
    {value: 18},
    {value: 38},
  ];
  const data2 = [
    {value: 50},
    {value: 10},
    {value: 45},
    {value: 30},
    {value: 45},
    {value: 18},
  ];
  const dataSet = [{
    data: [
    {value: 70},
    {value: 36},
    {value: 50},
    {value: 40},
    {value: 18},
    {value: 38},
  ]
  }, {data: [
    {value: 50},
    {value: 10},
    {value: 45},
    {value: 30},
    {value: 45},
    {value: 18},
  ]}]
  return (
    <View
      style={{
        paddingVertical: 100,
        paddingLeft: 20,
        backgroundColor: '#1C1C1C',
      }}>
        <BarChart
        width={340}
        rotateLabel
        noOfSections={4}
        stackData={stackData}
        />
      <LineChart
        areaChart
        curved
        // data={data1}
        // data2={data2}
        dataSet={dataSet}
        hideDataPoints
        spacing={68}
        color1="#8a56ce"
        color2="#56acce"
        startFillColor1="#8a56ce"
        startFillColor2="#56acce"
        endFillColor1="#8a56ce"
        endFillColor2="#56acce"
        startOpacity={0.9}
        endOpacity={0.2}
        initialSpacing={0}
        noOfSections={4}
        yAxisColor="white"
        yAxisThickness={0}
        rulesType="solid"
        rulesColor="gray"
        yAxisTextStyle={{color: 'gray'}}
        yAxisLabelSuffix="%"
        xAxisColor="lightgray"
        pointerConfig={{
          pointerStripUptoDataPoint: true,
          pointerStripColor: 'lightgray',
          pointerStripWidth: 2,
          strokeDashArray: [2, 5],
          pointerColor: 'lightgray',
          radius: 4,
          pointerLabelWidth: 100,
          pointerLabelHeight: 120,
          pointerEvents: 'auto',
          pointerLabelComponent: items => {
            console.log(items)
            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'}}>{items[1].value}</Text>
              </View>
            );
          },
        }}
      />
    </View>
  );
}

[Abhinandan-Kushwaha]

Hi @lindoncamaj
I just ran the above code on the Android simulator, and it is working fine.
Here's a snack with you code- https://snack.expo.dev/@ak_97/lindon-camaj

[lindoncamaj]

Hi Abhinandan,

Apologies for the delay. I believe the reason you are not noticing it here is because the dataset is really small. Here is a snack with an updated dataSet: https://snack.expo.dev/@lindonc/lindon-camaj?platform=android

I will say, I did not notice the issue in snack, but once I downloaded the files to my computer, did a 'npm install' and then 'npm expo start', I noticed it on my Android phone. Also with that, the behavior of the pointer is different between iOS and Android. I am attaching a video showing me running the app on Android, and as can be seen in the console, even if I dont move my finger the Pointer is being called (I put a console.log() in the pointerLabelComponent.

This is not happening on iOS, for if I do not move my finger, the Component is not called (which is expected), but as soon as I move it in any direction it is called. I am getting the maximum update depth issue on iOS as well, but I think that is maybe more so due to my charts involving a lot of data in the app we are developing. Any feedback/suggestions is appreciated!!

Video.mov

[Abhinandan-Kushwaha]

Thanks @lindoncamaj for the details. i am looking into it

[lindoncamaj]

Hey @Abhinandan-Kushwaha do you possibly have any updates? Thank you

[Abhinandan-Kushwaha]

Hi @lindoncamaj, I tried to reproduce this issue on my Android emulator using Expo, but failed to reproduce.
Attaching screen recording-

Lindon.mp4

Code-

import {Text, View} from 'react-native';
import {BarChart, LineChart} from 'react-native-gifted-charts';
const LindonCamaj = () => {
  const stackData = [
    {
      stacks: [
        {value: 10, color: 'orange'},
        {value: 20, color: '#4ABFF4', marginBottom: 2},
      ],
      label: 'Jan',
    },
    {
      stacks: [
        {value: 10, color: '#4ABFF4'},
        {value: 11, color: 'orange', marginBottom: 2},
        {value: 15, color: '#28B2B3', marginBottom: 2},
      ],
      label: 'Mar',
    },
    {
      stacks: [
        {value: 14, color: 'orange'},
        {value: 18, color: '#4ABFF4', marginBottom: 2},
      ],
      label: 'Feb',
    },
    {
      stacks: [
        {value: 7, color: '#4ABFF4'},
        {value: 11, color: 'orange', marginBottom: 2},
        {value: 10, color: '#28B2B3', marginBottom: 2},
      ],
      label: 'Mar',
    },
  ];

  const data1 = [
    {value: 70},
    {value: 36},
    {value: 50},
    {value: 40},
    {value: 18},
    {value: 38},
  ];
  const data2 = [
    {value: 50},
    {value: 10},
    {value: 45},
    {value: 30},
    {value: 45},
    {value: 18},
  ];
  const dataSet = [
    {
      data: [
        {value: 70},
        {value: 36},
        {value: 50},
        {value: 40},
        {value: 18},
        {value: 38},
        {value: 50},
        {value: 40},
        {value: 18},
        {value: 38},
      ],
    },
    {
      data: [
        {value: 50},
        {value: 10},
        {value: 45},
        {value: 30},
        {value: 45},
        {value: 18},
        {value: 45},
        {value: 30},
        {value: 45},
        {value: 18},
      ],
    },
    {
      data: [
        {value: 50},
        {value: 10},
        {value: 45},
        {value: 30},
        {value: 45},
        {value: 18},
        {value: 45},
        {value: 30},
        {value: 45},
        {value: 18},
      ],
    },
    {
      data: [
        {value: 40},
        {value: 10},
        {value: 65},
        {value: 70},
        {value: 45},
        {value: 18},
        {value: 65},
        {value: 70},
        {value: 45},
        {value: 18},
      ],
    },
    {
      data: [
        {value: 30},
        {value: 10},
        {value: 25},
        {value: 50},
        {value: 35},
        {value: 38},
        {value: 25},
        {value: 50},
        {value: 35},
        {value: 38},
      ],
    },
  ];
  return (
    <View
      style={{
        paddingVertical: 100,
        paddingLeft: 20,
        // backgroundColor: '#1C1C1C',
      }}>
      <BarChart
        width={340}
        rotateLabel
        noOfSections={4}
        stackData={stackData}
      />
      <LineChart
        areaChart
        curved
        // data={data1}
        // data2={data2}
        dataSet={dataSet}
        hideDataPoints
        spacing={68}
        color1="#8a56ce"
        color2="#56acce"
        startFillColor1="#8a56ce"
        startFillColor2="#56acce"
        endFillColor1="#8a56ce"
        endFillColor2="#56acce"
        startOpacity={0.9}
        endOpacity={0.2}
        initialSpacing={0}
        noOfSections={4}
        yAxisColor="white"
        yAxisThickness={0}
        rulesType="solid"
        rulesColor="gray"
        yAxisTextStyle={{color: 'gray'}}
        yAxisLabelSuffix="%"
        xAxisColor="lightgray"
        pointerConfig={{
          pointerStripUptoDataPoint: true,
          pointerStripColor: 'lightgray',
          pointerStripWidth: 2,
          strokeDashArray: [2, 5],
          pointerColor: 'lightgray',
          radius: 4,
          pointerLabelWidth: 100,
          pointerLabelHeight: 120,
          pointerEvents: 'none',
          pointerLabelComponent: (items: any) => {
            console.log(items);
            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'}}>
                  {items[1].value}
                </Text>
              </View>
            );
          },
        }}
      />
    </View>
  );
};

export default LindonCamaj;