Remove Axis from VictoryChart

Question

I'm using victory-native and have a VictoryChart with a VictoryLine and VictoryArea as children and want to remove the axis of the chart. Is there any way to access it through props? Probably the color can be set to transparent then.

Here is some code:

 <VictoryChart
  containerComponent={
    <VictoryContainer />
  }
 > 
  <VictoryArea
    interpolation={interpolation}
    data={this.state.data}
  />
  <VictoryLine
    interpolation={interpolation}
    data={this.state.data}
  />
</VictoryChart>

Hectorhecuba

You probably should provide code of your implementation. – Rachitis

Answer 1

Add VictoryAxis with transparent stroke and fill:

<VictoryAxis style={{ 
    axis: {stroke: "transparent"}, 
    ticks: {stroke: "transparent"},
    tickLabels: { fill:"transparent"} 
}} />

Then the result becomes:

 <VictoryChart
  containerComponent={
    <VictoryContainer />
  }
 > 
  <VictoryArea
    interpolation={interpolation}
    data={this.state.data}
  />
  <VictoryLine
    interpolation={interpolation}
    data={this.state.data}
  />
  <VictoryAxis style={{ 
    axis: {stroke: "transparent"}, 
    ticks: {stroke: "transparent"},
    tickLabels: { fill:"transparent"} 
  }} />
</VictoryChart>

Instinctive

Answer 2

Maybe you can try to add VictoryAxis with axis stroke none to after your chart

<VictoryChart
  containerComponent={
    <VictoryContainer />
  }
 > 
  <VictoryArea
    interpolation={interpolation}
    data={this.state.data}
  />
  <VictoryLine
    interpolation={interpolation}
    data={this.state.data}
  />
  <VictoryAxis style={{ axis: {stroke: "none"} }} />
</VictoryChart>

Zayin

Thanks, this worked for removing the axis lines, but the tick labels are still there. I found some ways to remove (move out of rendered view) them, maybe you can update you answers with those and probably better ones: - add tickLabelComponent with empty View component -> tickLabelComponent={<View />} - add tickValues={[x, y]}, where x and y are values out of rendered view, for example min(data.x) - 1 and max(data.x) + 1 – Hectorhecuba

I downvoted because this is not the correct answer. – Incur

@Hectorhecuba i hid the tick labels by adding tickFormat={() => ""} to VictoryAxis – Lima

Answer 3

VictoryChart uses default axes. If you want to plot data without using any axes, use VictoryGroup instead.

See the FAQ

Gynecocracy

This answer is misleading. If you drop-in replace VictoryChart with VictoryGroup, the chart will not work anymore. Please correct the answer with more information. – Flapdoodle

It works just fine for me? – Golf