cssvictory-charts

striped background in Victory chart

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 - i.e. 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

enter image description here

Solution

  • Here I tried to pass svg linearGradient as background fill color. I attached a link to working demo below.

    <svg>
    <defs>
      <linearGradient id="radial_gradient" gradientTransform="rotate(90)">
        <stop offset="0%" stop-color="#190b28" />
        <stop offset="25%" stop-color="#190b28" />
        <stop offset="25%" stop-color="#434238" />
        <stop offset="50%" stop-color="#434238" />
        <stop offset="50%" stop-color="#334110" />
        <stop offset="75%" stop-color="#334110" />
        <stop offset="75%" stop-color="#524800" />
        <stop offset="100%" stop-color="#524800" />
      </linearGradient>
    </defs>
</svg>

    https://stackblitz.com/edit/react-tatkpg?file=src/App.js