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>

You probably should provide code of your implementation. – Tim Nov 14 '17 at 10:37 — Tim, Nov 14 '17 at 10:37

score 18 · Accepted Answer · answered May 27 '20 at 04:53

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>

score 10 · Answer 2 · answered Mar 05 '18 at 05:39

10

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

See the FAQ

answered Mar 05 '18 at 05:39

timbo

13,244
8
51
71

3

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. – bpylearner Jan 04 '19 at 14:29
It works just fine for me? – Bogdan M. Apr 26 '22 at 12:38

score 9 · Answer 3 · answered Nov 26 '17 at 10:04

9

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>

answered Nov 26 '17 at 10:04

QuảngPB

121
6

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={} - 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 – student96 Nov 28 '17 at 13:15
I downvoted because this is not the correct answer. – quinn Oct 10 '19 at 01:33
1

@student96 i hid the tick labels by adding `tickFormat={() => ""}` to `VictoryAxis` – Tekeste Kidanu Feb 20 '21 at 17:26

Remove Axis from VictoryChart

3 Answers3