0

I'm using react-native-svg to render a chart, which contain a gradient, work perfectly on web, but when use the same code on react-native it won't work

Here is the react-native code

const data = [
  {x: new Date(2000, 3, 2), y: 100},
  {x: new Date(2003, 4, 3), y: 120},
  {x: new Date(2002, 5, 4), y: 140},
  {x: new Date(2005, 6, 5), y: 150},
  {x: new Date(2006, 7, 6), y: 130},
  {x: new Date(2007, 8, 7), y: 120},
  {x: new Date(2008, 9, 8), y: 150},
];
export default function Chart4() {
  const dateData = data.map(i => i.x);
  return (
    <Svg>
      <Defs>
        <LinearGradient id="myGradient" x1="0" y1="0" x2="0" y2="1.3">
          <Stop offset="0%" stopColor="#86CD9B" stop-opacity={1} />

          <Stop offset="100%" stopColor="white" stop-opacity={1} />
        </LinearGradient>
      </Defs>
      <VictoryChart scale={{x: 'time', y: 'linear'}}>
        <VictoryAxis dependentAxis />
        <VictoryAxis
          tickValues={dateData}
          tickFormat={x => {
            return x.toLocaleString('vn-vn', {
              month: 'short',
              day: 'numeric',
            });
          }}
        />
        <VictoryArea
          data={data}
          style={{
            data: {fill: 'url(#myGradient)'},
          }}
        />
        <VictoryScatter
          data={data}
          style={{
            data: {
              stroke: '#86CD9B',
              fill: 'white',
              strokeWidth: 1,
              fillOpacity: 1,
            },
          }}
          labels={({datum}) =>
            `x: ${datum.x.toLocaleString('vn-vn', {
              month: 'short',
              day: 'numeric',
            })} \n y:${datum.y}`
          }
          labelComponent={
            <VictoryTooltip
              renderInPortal={false}
              dy={0}
              centerOffset={{x: 25}}
            />
          }
        />
      </VictoryChart>
    </Svg>
  );
}

And it show nothing enter image description here

But on web ( react ) , it work perfectly, here is codesanbbox for that https://codesandbox.io/s/chart-blood-glucose-031dn?file=/src/App.js

What going on, please help, thank a lots

CODEforDREAM
  • 863
  • 1
  • 8
  • 24
  • Does it fail on both Apple and Android? It's possible that there is a bug in the gradient support in react-native-svg. Have you tried using a known-good gradient definition (eg one from their docs). Could [this be your problem](https://github.com/react-native-svg/react-native-svg/issues/1348)? – Paul LeBeau Nov 09 '21 at 08:24
  • Have you managed to find a fix? Can't find anything useful on this topic – PCPbiscuit Apr 22 '22 at 09:43

0 Answers0