Bar Chart transparent on the web

[willianlouza]

The Bar Chart is transparent on the web unless i reload the page.

The home page shows the Bar Chart normally

So if I navigate to another page which also has a Bar Chart, it displays transparent

And when I refresh the page, the graph is displayed as it should

"expo-router": "~3.5.18"
"react-native-chart-kit": "^6.12.0"
"react-native-svg": "^15.4.0"
"react-native-web": "~0.19.10"
"expo": "~51.0.22"
"react-native": "0.74.3"

[willianlouza]

const chartConfig: Partial<AbstractChartConfig> = {
  backgroundColor: CMEXX_COLORS.TERTIARY,
  backgroundGradientFrom: CMEXX_COLORS.TERTIARY,
  backgroundGradientTo: CMEXX_COLORS.TERTIARY,
  backgroundGradientFromOpacity: 0.2,
  backgroundGradientToOpacity: 0.1,
  color: (opacity = 1) => CMEXX_COLORS.PRIMARY,
};

....

 return (
    <View
      style={{
        marginVertical: 16,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Text style={{ marginBottom: 8 }}>{classificacao.nome}</Text>
      <View
        style={{
          borderWidth: 1,
          borderRadius: 6,
          borderColor: CMEXX_COLORS.PRIMARY,
        }}
      >
        <BarChart
          style={{ paddingRight: 0 }}
          data={barChartData}
          width={(Platform.OS === "web" ? screenWidth / 2 : screenWidth) - 40}
          withHorizontalLabels={false}
          height={220}
          chartConfig={{
            ...chartConfig,
            propsForLabels: {
              fontSize: RFPercentage(1.2),
              fontFamily: "SpaceMono",
            },
          }}
          withInnerLines={false}
          withCustomBarColorFromData={false}
          yAxisLabel=""
          yAxisSuffix=""
          showValuesOnTopOfBars
        />
      </View>
    </View>
  );

[hummus-erectus]

I am experiencing this too. I don't suppose you found a solution?

[willianlouza]

No. I'm using react-native-gifted-charts instead

[jyotykumari63]

@willianlouza react-native-gifted-charts pie chart is not working with onPress/focusOnPress event on web? any suggestion

[Jelmerovereem]

Same here, any fix?

[Jelmerovereem]

I was able to fix it in my fork f81c257.

Here is a patch file for patch-package:

react-native-chart-kit+6.12.0.patch