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:
2 Answers
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
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.
Related