I'm using this library to make a StackedAreaChart. It's currently working but I need to change the colors to gradients.Only I am able to plot points using the data,I want the gradient colors to be applied in the plotted chart area. I have attached the code and screenshot for this.
<ChartPathProvider
data={{
points: chartData.map((data) => ({
x: toTimestamp(data.fiscal_year),
y:
data.close_price != null
? parseFloat(data.close_price).toFixed(
instrumentData.digit
)
: 0,
})),
smoothingStrategy: "bezier",
}}
>
<View>
<ChartPath
height={moderateScale(280)}
stroke="green"
strokeWidth={3}
width={screenWidth}
/>
<ChartDot>
<View
style={{
position: "absolute",
left: moderateScale(-35),
width: moderateScale(80),
alignItems: "center",
backgroundColor: "rgba(0, 0, 0, 0.4)",
}}
>
</View>
{/* Chart x & y axis */}
<ChartXLabel
format={toStringDate}
style={[
styles.M12_FW600_LH19_LS02,
styles.whiteColor,
]}
/>
<ChartYLabel
format={formatPrice}
style={[
styles.M12_FW600_LH19_LS02,
styles.whiteColor,
]}
/>
</View>
</ChartDot>
</View>
</ChartPathProvider>
Currently this charts [1]: https://i.stack.imgur.com/jYptt.png This is required [2]: https://i.stack.imgur.com/pr270.png