Issue with LineChart showing label points on android with data set greater than 80

saadiyakazi commented 1 month ago

Description

issue with the library on android when data set is greater than 80 the label components are not showing up and horizontal scroll line are disappearing

 <LineChart
                focusEnabled={true}
                adjustToWidth

                data={
              [{value:100},{value:100},{value:100},{value:100},{value:100},{value:100},{value:100},{value:100},{value:100},{value:100},{value:100},{value:100},{value:100},{value:100},{value:100},{value:100},{value:100},{value:100},{value:100},{value:100},{value:100},{value:100} ...................,{value:100}] //array is greaterthan 100
                }
                spacing={80}
                showTextOnFocus
                initialSpacing={80}
                focusedDataPointColor={globalColors.purple}
                color={globalColors.purple}
                dataPointsColor={globalColors.bluegem}
                yAxisColor={globalColors.zumthor}
                xAxisColor={globalColors.zumthor}
                rulesType="solid"
                showVerticalLines
                showStripOnFocus
                leftShiftForLastIndexTooltip={55}
                height={heightPercentageToDP(35)}
                rulesColor={globalColors.brightGray}
                verticalLinesColor={globalColors.transparent}
                xAxisLabelTexts={xAxisLabelTexts?.reverse()}
                xAxisLabelTextStyle={{ alignSelf: "flex-start" }}
                maxValue={
                  this.state.highestMetric === 0
                    ? 3
                    : this.state.highestMetric < 1
                    ? 1
                    : Math.round(
                        (this.state.highestMetric * 1.5) /
                          Math.pow(
                            5,
                            Math.round(
                              this.state.highestMetric * 1.5
                            ).toString().length - 1
                          )
                      ) *
                      Math.pow(
                        5,
                        Math.round(this.state.highestMetric * 1.5).toString()
                          .length - 1
                      )
                }
                roundToDigits={
                  !Number.isInteger(this.state.highestMetric) ? 2 : 0.1
                }
                yAxisLabelWidth={55}
                minValue={0}
                yAxisOffset={0}
                noOfSections={3}
                showFractionalValues={true}

              />

https://github.com/user-attachments/assets/299fe290-ebee-422e-a9f0-62d4e42e9676

Steps to reproduce

Android

data grater than 100

Snack or a link to a repository

No response

version of react-native-gifted-charts

1.4.43

React Native version

0.71.6

Platforms

Android, iOS

Workflow

React Native

SamyOptimize commented 1 month ago

I've also had crashes happening on android when the data set is longer than 100 on my phone (Huawei P20 Pro). The crash error was java.lang.RuntimeException: Canvas: trying to draw too large(114117768bytes) bitmap.

The focusedCustomDataPoint prop also doesn't work for me on data points when pressing on any point after 68 points on my phone.

Abhinandan-Kushwaha commented 1 month ago

Hi @saadiyakazi @SamyOptimize Android does not allow rendering very large svgs. See https://github.com/software-mansion/react-native-svg/issues/440

For large datasets, you must use pagination instead of rendering the entire data at once. See pagination related props

Here's a related issue

Abhinandan-Kushwaha / react-native-gifted-charts