Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Victory Charts background grid

Tags:

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

like image 332
dingdingding Avatar asked Oct 23 '18 18:10

dingdingding


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

like image 60
dingdingding Avatar answered Oct 12 '22 07:10

dingdingding


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.

like image 41
Емил Цоков Avatar answered Oct 12 '22 06:10

Емил Цоков