I want to change the background color of my graph, also remove this lines in it. I tried to add backgroundColor property in CartesianChart and also Line but does not worked.

 return (
    <>
    <View style={styles.coinButton}>
      <CoinButton selectedItem={selectedItem} setSelectedItem={setSelectedItem}/>
    </View>
    <View style={styles.graph}>
      {formattedData.length > 0 ? (
        <CartesianChart
          data={formattedData}
          xKey="day"
          yKeys={['highTmp']}
          axisOptions={{ font }}
          padding={{ left: 5, top: 90, bottom: 0, right: 5 }}
          domainPadding={{ left: 5, right: 0 }}
          chartPressState={state}
          // labelColor="red"

          // xAxis={{labelColor = 'red'}}
        >
          {({ points }) => (
            <>
              <Line points={points.highTmp}
               color="blue"
                strokeWidth={3}

                // strokeWidth={3}
                animate={{ type: 'spring', duration: 600 }}
                />
              {isActive && <ToolTip x={state.x.position} y={state.y.highTmp.position} />}
            </>
          )}
        </CartesianChart>
      ) : (
        <View style={styles.loadingContainer}>
            <ActivityIndicator size="large" color="#0000ff" />
        </View>
          )}
    </View>
    </>

  );

I want to change the background color of my graph, also remove this lines in it. I tried to add backgroundColor property in CartesianChart and also Line but does not worked.

 return (
    <>
    <View style={styles.coinButton}>
      <CoinButton selectedItem={selectedItem} setSelectedItem={setSelectedItem}/>
    </View>
    <View style={styles.graph}>
      {formattedData.length > 0 ? (
        <CartesianChart
          data={formattedData}
          xKey="day"
          yKeys={['highTmp']}
          axisOptions={{ font }}
          padding={{ left: 5, top: 90, bottom: 0, right: 5 }}
          domainPadding={{ left: 5, right: 0 }}
          chartPressState={state}
          // labelColor="red"

          // xAxis={{labelColor = 'red'}}
        >
          {({ points }) => (
            <>
              <Line points={points.highTmp}
               color="blue"
                strokeWidth={3}

                // strokeWidth={3}
                animate={{ type: 'spring', duration: 600 }}
                />
              {isActive && <ToolTip x={state.x.position} y={state.y.highTmp.position} />}
            </>
          )}
        </CartesianChart>
      ) : (
        <View style={styles.loadingContainer}>
            <ActivityIndicator size="large" color="#0000ff" />
        </View>
          )}
    </View>
    </>

  );

• react-native
• victory-charts
• victory-native

1 Answer 1

I figreout that the backgroundColor of the graph it was made it by the View, so just change it there. And about to remove the grid lines you can pass

 axisOptions={{ lineColor:'transparent',}}