How to added multiple linear gradient for a single path

[pandey21197]

Not able to plot multiple linear gradient for a single path to acheive:

<Path>
< LinearGradient/>
< LinearGradient/>
< LinearGradient/>
</Path>

currently it takes the last LinearGradient Value. Is there a way to achieve above result.

[wcandillon]

In the image above, there is only one linear gradient visible, can you see it?

[pandey21197]

Hey @wcandillon But it doesn’t have a fixed position of start and end which we pass in LinearGradient. It depends the value of y of that point whether to show the gradient effect green to red.

[wcandillon]

In a previous question you posted, we gave a code snippet where you can get the bounding box of the path that will give you the values you need to use for the linear gradient.

[pandey21197]

as per the logic you said before it will be something like this:

But the required is to show linear gradient when y value is above 140, as can be seen in vertical axis. There can be multiple slopes which are above 140.

[pandey21197]

@wcandillon can you please help me out with this one, it's really important...

[inakiarroyo]

Hey @wcandillon! I've been trying for a while what @pandey21197 is suggesting, and I think as a summary what he is trying to say is, if it possible to use the LinearGradient component to change the color of a line based on a y-threshold. For example when the line is above the median value, it would become green and when the line is below the median value, it will become red...

D3 for example allows it using offset and stop color:

svg.append("linearGradient")                
        .attr("id", "line-gradient")            
        .attr("gradientUnits", "userSpaceOnUse")    
        .attr("x1", 0).attr("y1", y(0))         
        .attr("x2", 0).attr("y2", y(height))      
    .selectAll("stop")                      
        .data([                             
            {offset: "0%", color: "green"},       
            {offset: "40%", color: "green"},  
            {offset: "40%", color: "orange"},        
            {offset: "62%", color: "orange"},        
            {offset: "62%", color: "red"},    
            {offset: "100%", color: "red"}    
        ])   

Thinking in which Skia already offers, I think the position property from the LinearGradient is similar. The use of it allows horizontal linear gradient, and not vertical gradient (top to bottom or viceversa), which possible could solve this implementation? Although this may be more complex that I am suggesting.

I saw you also suggest the use of the <Paint /> component, but not sure if this fits with the described target.

Also, building the graph in parts, so that the initial data is divided by the color that would be represented in the graph and then painting the parts can be quite complicated, if later on you pretend to use gestures on the screen showing the cursor and the values of the x y points, but it may be the only solution... 🤷

What do you think would be the best way to get this kind of graph?

I am trying to implement something like:

Thank you in advance!

[wcandillon]

yes the position property in gradient does exactly what you need. instead of 40% you can put 0.4.

[0, 0.4, 0.62, 1]

for instance. As a rule of thumb we are matching the same capabilities than SVG there.

[inakiarroyo]

Thank you for you reply. Using the position in that way is how I am using it at the moment, which applies the horizontal gradient following the positions. I got this.

The problem to solve here is how to apply a vertical gradient (bottom to top or top to bottom). Is possible to define the positions property in a way that it defines "y-axis" positions rather than "x-axis" positions?

Would it be possible?

pd: SVG spec allows to use gradientTransform="rotate(90)" over the linearGradient. Would be possible to wrap the Skia LinearGradient component in a Group and apply over it this kind of transformation? Some checks I did following this idea ended up with a graph with a black default color along all the path... so maybe it's all nonsense :)

Thank you in advance.

[wcandillon]

you can use <LinearGradient start={topLeft} end={bottomLeft} ... />

[inakiarroyo]

You are absolutely right, sorry because I lost the focus after so many tests and I think that in some of the attempts I mixed options that did not allow me to see the result well.

If it helps others, one of my main issues was that I was changing the minimum value of the y-range of the graph to "0" value, so the total height of it and then where the gradient was applied was different from the height of the data represented in the graph. This was causing that I was only able to see a single color instead of the gradient along the y-axis.

Many thanks for your time @wcandillon 👍🏼