Multicolor Line Graph Line

[Bee Boop]

How might i go about creating a multicolor line with this library? Like this:

Thanks

[Luke Wilkinson]

+1

[Mike Wheaton]

Looks like the line's gradient is set on AnimatedLineGraph.tsx:282 with an array of 5 colors:

  const gradientColors = useMemo(() => {
    if (enableFadeInMask) {
      return [
        `${getSixDigitHex(color)}00`,
        `${getSixDigitHex(color)}ff`,
        `${getSixDigitHex(color)}ff`,
        `${getSixDigitHex(color)}33`,
        `${getSixDigitHex(color)}33`,
      ]
    }
    return [
      color,
      color,
      color,
      `${getSixDigitHex(color)}33`,
      `${getSixDigitHex(color)}33`,
    ]
  }, [color, enableFadeInMask])

It appears that first 3 colors define a gradient for before the selection point (when enablePanGesture is true), and the last 2 colors are the gradient of the line after the selection point.

For example, if we change the array to:

    return [
      'red',
      'yellow',
      'red',
      'blue',
      'black',
    ]

We get this result (note that I've changed the default dot to a line):

I have a related request to this, where I'd like to prevent it from using a gradient at all, so the line remains the same color regardless of the pan state:

I'm brand new to this library and not sure if this has come up before (I searched the issues but didn't see anything else) so am not sure exactly how this would best be implemented. But I'd be happy to make a PR if we can land on a plan first that's likely to be accepted. It seems like we need another prop for lineFillColors (similar to gradientFillColors) to provide more control over this?