Как применить цвет градиента к React Native StackedAreaChart?

Question

Я использую эту библиотеку для создания StackedAreaChart. В настоящее время это работает, но мне нужно изменить цвета на градиенты. Примеры, представленные в этом пакете, применяют градиенты только к AreaChart.

Вот мой код

const hardCodedData = [
        {
            month: new Date(2015, 0, 1),
            apples: 3840,
            bananas: 1920,
            cherries: 960,
            dates: 400,
        },
        {
            month: new Date(2015, 1, 1),
            apples: 1600,
            bananas: 1440,
            cherries: 960,
            dates: 400,
        },
        {
            month: new Date(2015, 2, 1),
            apples: 640,
            bananas: 960,
            cherries: 3640,
            dates: 400,
        },
        {
            month: new Date(2015, 3, 1),
            apples: 3320,
            bananas: 480,
            cherries: 640,
            dates: 400,
        },
    ]

    const colors = ['#8800cc', '#aa00ff', '#cc66ff', '#eeccff']
    const keys = ['apples', 'bananas', 'cherries', 'dates']
    const svgs = [
        { onPress: () => alert('apples') },
        { onPress: () => alert('bananas') },
        { onPress: () => alert('cherries') },
        { onPress: () => alert('dates') },
    ]
<StackedAreaChart
   style={{ height: 200, paddingVertical: 16 }}
   data={hardCodedData}
   keys={keys}
   colors={colors}
   curve={shape.curveNatural}
   showGrid={false}
   svgs={svgs}
/>

Не могли бы вы помочь мне в этом?

РЕДАКТИРОВАТЬ

const Gradient = () =>
        map(data, (d, i) => {
            let key = 'gradient' + d.id;
            let color = colors[d.id];

            return (
                <Defs key={key}>
                    <LinearGradient id={key} x1={'0'} y={'0%'} x2={'0'} y2={'100%'}>
                        <Stop offset={'0%'} stopColor={color} />
                        <Stop
                            offset={'100%'}
                            stopColor={'red'}
                        />
                    </LinearGradient>
                </Defs>
            );
        });

    let fill1 = `url(#gradient${d.id})`;
    let fill2 = `url(#gradient${d.id})`;
    let fill3 = `url(#gradient${d.id})`;
    let fill4 = `url(#gradient${d.id})`;

    let gradients = [fill1, fill2, fill3, fill4]

 <StackedAreaChart
     style={{ height: 200, paddingVertical: 16 }}
     data={hardCodedData}
     keys={keys}
     colors={gradients}
     curve={shape.curveNatural}
     showGrid={false}
     svgs={svgs}
   >
     <Gradient />
   </StackedAreaChart>

Answer 1

const Gradient = () =>
map(data, (d, i) => {
  let key = 'gradient' + d.id;
  let color = Yourcolors[d.id];

  return (
    <Defs key={key}>
      <LinearGradient id={key} x1={'0'} y={'0%'} x2={'0'} y2={'100%'}>
        <Stop offset={'0%'} stopColor={color} />
        <Stop
          offset={'100%'}
          stopColor={color2}
        />
      </LinearGradient>
    </Defs>
  );
});
...

<StackedAreaChart
   style={{ height: 200, paddingVertical: 16 }}
   data={hardCodedData}
   keys={keys}
   colors={gradients}
   curve={shape.curveNatural}
   showGrid={false}
   svgs={svgs}
>
<Gradient/>
</StackedAreaChart>

и в ваших цветах просто заполните области градиентами, как

let gradients = map(data, d=> {
  let fill = `url(#gradient${d.id})`;
return fill;
})

//this will generate an array of gradient defs

, передайте массив градиентов вместо цветов в вашем стековом хранилище

PS. Я проверил этот тип реализации в других графиках, не в диаграмме области