react-native-chart-kit icon indicating copy to clipboard operation
react-native-chart-kit copied to clipboard

toDataURL does not work on iOS.

Open iamrohitagg opened this issue 2 years ago • 1 comments

I am using LineChart component from the library in my application and I have enclosed the component inside react-native-svg to get the base64 equivalent of the graph. But the generated base64 does not contains the graph drawn by react-native-chart-kit.

<Svg ref = {chartRef}>
 <LineChart
                  data={{
                    labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
                    datasets: [
                      {
                        data: rentCostData,
                        color: (opacity = 1) => `rgba(255, 0, 0, ${opacity})`,
                      },
                      {
                        data: buyCostData,
                        color: (opacity = 1) =>
                          `rgba(14, 124, 202, ${opacity})`,
                      },
                    ],
                  }}
                  width={screenWidth}
                  height={screenHeight * 0.55}
                  yAxisLabel="$"
                  yAxisInterval={1}
                  chartConfig={{
                    backgroundColor: 'white',
                    backgroundGradientFrom: 'white',
                    backgroundGradientTo: 'white',
                    decimalPlaces: 0,
                    color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
                    labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
                    propsForDots: {
                      r: '6',
                    },
                  }}
                  withDots={true}
                />
</Svg>

Then I am using ref to get the base64 data.

this.chartViewRef.current &&
      this.chartViewRef.current.toDataURL(base64 => {
        this.setState({
          base64ImageData: base64,
        });
      });

This works well for Android. Packages version

'react-native' -> "^0.64.2",
"react-native-svg" -> "^12.1.1",
"react-native-chart-kit" -> "^6.11.0"

iamrohitagg avatar Dec 31 '21 12:12 iamrohitagg

Did you find a solution? I need to do the same

budwol avatar Nov 12 '23 05:11 budwol