1

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

Manish Kumar
  • 997
  • 2
  • 13
  • 30

0 Answers0