CODEWITHSUNDEEP
cssvictory-charts
user299791
user299791

Reputation: 2070

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

Upvotes: 0

Views: 1084

Answers (2)

Atikur Rabbi
Atikur Rabbi

Reputation: 1071

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

Upvotes: 1

T04435
T04435

Reputation: 14022

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%);

Upvotes: 1

Related Questions