striped background in Victory chart

Question

. 。 Answers to this question are eligible for a +250 reputation bounty. user299791 wants to to this question. 。

I am trying to create a bar chart with Victory and I need to customise the background. I know there is a Background component and by adding these lines to a VictoryChart you can change the background color:

  <VictoryChart
    padding={{left:100, top:50, bottom: 50, right: 10}}
    domainPadding={{x: 20}}
    domain={{ y: [0, 4] }}
    theme={VictoryTheme.material}
    tickFormat={(tick) => `${tick}`}
    style={{
       background: { 
         fill: "black"
       }
    }}
    backgroundComponent={ <Background /> }
  />

I need however to have a striped background, with 4 different colours, one for each y value - ie from 0 to basso is green, from basso to medio is orange and so on...

Is this something that can be achieved with Victory? Any advice more than welcome

Answer 1

Without knowing what your code looks like, I'll try this. replace the current black bg with a linear gradient.

This solution assumes that each Y axis element is evenly spaced and only 4 of the, though if you need more than 4 just add them.

background: rgb(30,115,14);
background: linear-gradient(0deg, rgba(30,115,14,1) 0%, rgba(30,115,14,1) 25%, rgba(212,92,15,1) 25%, rgba(212,92,15,1) 50%, rgba(6,82,169,1) 50%, rgba(6,82,169,1) 75%, rgba(0,212,255,1) 75%, rgba(0,212,255,1) 100%);

Answer 2

I don't know about your project configuration. But I hope this will help you

https://react-tatkpg.stackblitz.io