Victory Charts background grid

Question

Is it possible to display a grid like this using Victory charts?

So far I can only get a grid with both vertical and horizontal lines on top of my bars likes this:

Costanzo

Answer 1

The horizontal bars can be removed by removing stroke style. The vertical bars which I wanted to keep can be 'moved' behind by changing the order of the elements as noted here: https://formidable.com/open-source/victory/guides/layout/#svg-render-order

Costanzo

Answer 2

By providing

style={{
      grid: { stroke: '#ddd444', strokeWidth: 1.5 },
    }}

to your dependant axis like

<VictoryAxis
        dependentAxis
        tickFormat={(tick) => `${tick}`}
        style={{
          grid: { stroke: '#F4F5F7', strokeWidth: 0.5 },
        }}
      />

you will achieve desired result.

Brevet