How to add LinearGradient area both above and below some x value in a line graph

[Jorundur]

I'm trying to do something similar to this image in react-native-skia.

The only thing I'm asking about here is just the linear gradient part - i.e. how to get a linear gradient fill both below some y value (here y = 0) and above it.

Since this is a graph whose purpose is similar to the graph in the Wallet example in this repo, I've been looking into that example and attempting to change it to my needs but haven't got very far.

Can anyone help me create a line with the linear gradient like shown in the image? Many thanks!

[wcandillon]

Here's an idea on how to do it. How idea if this a good approach or not:

1. Group your points in two: the ones below the lines and the ones above the line
2. Get the bounding box of each group. Here is an example for rects, it would be even simpler for points:

   react-native-skia/package/src/skia/core/Rect.ts

   Line 10 in 0d8454e

   export const bounds = (rects: SkRect[]) => {

   Each bounding box gives you the coordinate of the gradient you need to use.
3. Draw the path twice, one for each two gradients.

[Jorundur]

Thanks @wcandillon, will try that out!

[Jorundur]

I finally got round to looking into this again. I didn't fully understand how to get this working with the bounding boxes @wcandillon, but ended up doing something similar to what you mentioned with splitting this into two parts.

1. Define the graph line, I used d3 for this:

const graphLine = line<DataPoint>()
    .x((d) => x(new Date(d.date)))
    .y((d) => y(d.price))(data); // data is an array of { date: string, price: number } objects

2. Define a function that creates a gradient area either above or below y=0 (positive vs. negative)

export const getGradientAreaSplit = (
  graphLine: string | null, // the line created above
  width: number,
  height: number, // in my use case this is the graph height / 2, i.e. area above or below y=0
  variant: 'positive' | 'negative'
) => {
  // 1) The initial graph line (which can go below or above y=0)
  const gradientAreaSplit = Skia.Path.MakeFromSVGString(graphLine ?? '0') ?? Skia.Path.Make();
  const useFirstY =
    (variant === 'positive' && gradientAreaSplit.getPoint(0).y > 0) ||
    (variant === 'negative' && gradientAreaSplit.getPoint(0).y < 0);
  gradientAreaSplit
    // 2) Extend line to y=0 at the right end
    .lineTo(width, height)
    // 3) Extend line to y=0 at the left end
    .lineTo(0, height)
    // 4) Extend line to first point to close the area if that point is in the area, otherwise to y=0 (see useFirstY logic)
    .lineTo(0, useFirstY ? gradientAreaSplit.getPoint(0).y : height);
  return gradientAreaSplit;
};

This can create the areas shown in below (I've crudely added a gold connector at y=0 (bottom of 1st img, top of 2nd) to the images just to understand it better, it's not actually rendered):

3. Render both areas (gradientAreaPosPath and gradientAreaNegPath are created from calling the function above)

    <Group>
      <Path path={gradientAreaPosPath}>
        <LinearGradient start={vec(0, RANGE_OFFSET)} end={vec(0, GRAPH_HEIGHT / 2)} colors={gradientAreaColors} />
      </Path>
      <Path path={gradientAreaNegPath}>
        <LinearGradient
          start={vec(0, GRAPH_HEIGHT - RANGE_OFFSET)}
          end={vec(0, GRAPH_HEIGHT / 2)}
          colors={gradientAreaColors}
        />
      </Path>
    </Group>

[carlreiser2]

I achieved this in a different way, using Area and LinearGraident, this way you dont need to split your path into two parts. You will need to find the zeroYAxis position and save that somewhere to get the desired effect.

const getShading = (dps: PointsArray, originalDp: XyChartDataMetaWithAnimation) => {
			// const lastDp = dps[dps.length - 1];

			return (
				<Group>
					<Area points={dps} y0={zeroYAxisPos}>
						<LinearGradient
							start={{ x: 0, y: chartBounds.top }}
							end={{ x: 0, y: zeroYAxisPos }}
							colors={[
								hexToRgbA(originalDp.shadingColor?.aboveZero ?? originalDp.lineColor, 0.8),
								hexToRgbA(originalDp.shadingColor?.aboveZero ?? originalDp.lineColor, 0.01),
							]}
						/>
					</Area>
					<Area points={dps} y0={zeroYAxisPos}>
						<LinearGradient
							start={{ x: 0, y: chartBounds.bottom }}
							end={{ x: 0, y: zeroYAxisPos }}
							colors={[
								hexToRgbA(originalDp.shadingColor?.belowZero ?? originalDp.lineColor, 0.8),
								hexToRgbA(originalDp.shadingColor?.belowZero ?? originalDp.lineColor, 0.01),
							]}
						/>
					</Area>
				</Group>
			);
		};