Fill Linear Gradient color VictoryBar typescript project

[kieuquang1110tt]

I try to use fill color bar but nothing work. Help.

import React, { memo } from "react";
import { View, Image } from "react-native";
import {
TopNavigation,
useTheme,
StyleService,
useStyleSheet,
Layout,
} from "@ui-kitten/components";
import { useNavigation } from "@react-navigation/native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import useLayout from "hooks/useLayout";
import { globalStyle } from "styles/globalStyle";

import Text from "components/Text";
import Content from "components/Content";
import Container from "components/Container";
import {
VictoryBar,
VictoryGroup,
VictoryLabel,
VictoryChart,
VictoryTooltip,
VictoryVoronoiContainer,
VictoryArea,
} from "victory-native";
import Svg, { Defs, LinearGradient, Stop } from "react-native-svg";
import { url } from "inspector";
interface Props {
x: number;
y: number;
y0: number;
}
interface DataProps {
data: Props[];
setStep: number;
}

const ActivityChart = memo(({ data, setStep }: DataProps) => {
const { goBack } = useNavigation();
const { height, width, top, bottom } = useLayout();
const theme = useTheme();
const styles = useStyleSheet(themedStyles);
return (



<Svg style={{ height: 0, width: 0 }} key={"gradient"}>
<Defs key={"gradient"}>
<LinearGradient id="gradient" x1={"10"} x2={"100%"} y2={"10%"}>









<VictoryBar
data={data}
cornerRadius={{ bottom: 4, top: 4 }}
barWidth={6}
animate={{
duration: 2000,
onLoad: { duration: 1000 },
}}
height={260}
style={{
data: {
fill: "url(#gradient)",
// fill: "#1E93FA",
stroke: "#1E93FA",
strokeWidth: 2,
},
}}
>


);
});

export default ActivityChart;

const themedStyles = StyleService.create({
container: {
flex: 1,
},
});

[becca-bailey]

Hi @kieuquang1110tt, when you get a chance do you mind throwing this in code sandbox? That would make it easier for me to see what is going on.

My guess at the moment is that the Victory style prop only supports specific attributes, and you might need to use a custom component to have a little more control.

<VictoryBar dataComponent={<Bar pathComponent={<path fill="url(#gradient") />} />} />

[gonganruyi]

react native 中如何实现？？

[gonganruyi]

@kieuquang1110tt 可以实现，采用以下代码：

 <VictoryChart padding={0} width={146}
    height={58}>
    <Defs>
      <LinearGradient id="charGradient" x1="0.5" y1="0" x2="0.5" y2="1">
        <Stop offset="0" stopColor={chartColor} />
        <Stop offset="1" stopColor="#FFFFFF" />
      </LinearGradient>
    </Defs>
    <VictoryArea
      interpolation="basis"
      width={146}
      height={58}
      padding={0}
      data={chartData}
      style={{
        data: { fill: 'url(#charGradient)', fillOpacity: 0.3, stroke: rateColor, strokeWidth: 1 },
        parent: { paddingTop: 0 }
      }}
    />
    <VictoryAxis style={{
      axis: { stroke: "#fff" },
      grid: { strokeOpacity: 0 },
      ticks: { stroke: "grey", size: 0 },
    }} />
 </VictoryChart>

[becca-bailey]

Hi @kieuquang1110tt, I'm going to convert this help request to a discussion thread to prevent it from getting lost in issue reports. Thanks!