Animations in FilledLineChart are not aligned!!!!

[danaabhi]

FilledLineChart(chartData: segmentationSelection == .week ? weekData : todayData)

                .filledTopLine(chartData: segmentationSelection == .week ? weekData : todayData,
                               lineColour: ColourStyle(colour: .orange),
                               
                               strokeStyle: StrokeStyle(lineWidth: 3))
            
                .xAxisLabels(chartData: segmentationSelection == .week ? weekData : todayData)
                .id(segmentationSelection == .week ? weekData.id : todayData.id)
                .frame(minWidth: 150, maxWidth: 900, minHeight: 150, idealHeight: 300, maxHeight: 300, alignment: .center)

we are having the following code in which the animation for gradient and line is not matching, whenever we start the app, the gradient appears first then slowly the line comes from bottom to top.

Also is there a way to make the animation start from center