We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

SplineAreaSeries joins first and last point?

Hi SyncFusion team,

I have just updated to the latest charts package (20.4.50) and the SpineAreaChart seems to have an issue. The area under the line is not shaded correctly anymore - instead the first and last point of the series are joined by a curved line and the area between the curved line and the spline series is filled?

Have you seen this issue before? See screenshow below.

Many Thanks


Screenshot 2023-02-20 at 5.19.39 pm.png

SplineAreaSeries<EquityData, DateTime>(
animationDelay: 0,
animationDuration: 0,
opacity: 0.2,
enableTooltip: true,
dataSource: controller.equityData,
borderColor: const Color.fromRGBO(0, 193, 187, 1),
color: Colors.white54,
borderDrawMode: BorderDrawMode.excludeBottom,
borderWidth: 1,
xValueMapper: (EquityData equity, _) => equity.x as DateTime,
yValueMapper: (EquityData equity, _) => equity.y,

3 Replies 1 reply marked as answer

YG Yuvaraj Gajaraj Syncfusion Team February 21, 2023 01:58 PM UTC

Hi Arconomy,

We suspect that you have used nonlinear data source values, so we suggest you use the sortingOrder and sortFieldValueMapper properties to sort the data source values in ascending order and avoid connecting a start and end point of the SplineAreaSeries. We have shared the code snippet below for your reference.

Code snippet:

SplineAreaSeries<ChartData, DateTime>(
dataSource: candlestick,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y,
sortingOrder: SortingOrder.ascending,
sortFieldValueMapper: (ChartData data, _) => data.x



Marked as answer

AR Arconomy February 22, 2023 12:44 AM UTC

Thanks Yuvaraj - that fixed it.

YG Yuvaraj Gajaraj Syncfusion Team February 22, 2023 06:31 AM UTC

Hi Arconomy,

Most Welcome. Kindly get back to us if you have further queries. We are always happy to assist you.



Live Chat Icon For mobile
Up arrow icon