8

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

enter image description here

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

enter image description here

dingdingding
  • 1,411
  • 1
  • 15
  • 23

2 Answers2

9

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

dingdingding
  • 1,411
  • 1
  • 15
  • 23
5

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.

Емил Цоков
  • 604
  • 8
  • 18