chart gets cut off when using stream data

[Jaehwi Kim]

Hi,

I'm working with Spline Arae Series.

I have implemented a live chart from the reference: real-time-spline-chart reference I got from syncfusion website. And the maximum and minimum is automatically determined by the chart as I want to have a nice view of the chart.

I have 18 list of data rendered, and every 3 seconds the first element gets popped and a new data is pushed in last index.

However, when the chart renders data that I am getting from stream, the chart renders a bit over / below the maximum and minimum of the chart.

When I change the chart to Area Series, it works fine, but when it is Spline Area Series, the curve seems to be cut off.

Here is how I implemented the chart:

SplineAreaSeries<LiveData, DateTime>(
  ...custom properties
  onRendererCreated: (ChartSeriesController chartController) {
    controller.chartSeriesController = chartController;
  },
  dataSource: controller.chartData,
  gradient: LinearGradient(
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    colors: ...customcolor,
    stops: [(0.0), (0.9)],
  ),
  opacity: 0.5,
  xValueMapper: (LiveData datas, _) => datas.realTime,
  yValueMapper: (LiveData datas, _) => datas.loadCon,
  animationDuration: 0,
),

And here is screenshot of chart when using AreaSeries (chart does not seems to be cut off or go over/below min & max):

And here is screenshot of chart when using SplineAreaSeries (the curve gets cut off and seems go over/below min & max):

Here is how the data look when I print the data:

Thank y

[Sriram Kiran Senthilkumar]

Hi Jaehwi Kim, 

  

Greetings from Syncfusion. We have analyzed your scenario at our end with the provided information, and we would like to let you know that the rendering of the spline area series or the spline type series which you have mentioned in your query is the default rendering behavior of spline series types. So, if you want to change rendering behavior of spline series, you can use the splineType property of SplineAreaSeries. This property allows you to set different spline area curve in the series and there are four different types available. Please refer the code snippet below for reference. 

SfCartesianChart( 

                        primaryXAxis: DateTimeAxis(), 

                        series: <ChartSeries>[ 

                            SplineAreaSeries<SalesData, DateTime>( 

                                dataSource: chartData, 

                                // Setting spline type for the series. 

                                splineType: SplineType.cardinal, 

                                cardinalSplineTension: 0.9, 

                                xValueMapper: (SalesData sales, _) => sales.year, 

                                yValueMapper: (SalesData sales, _) => sales.sales 

                            ) 

                        ] 

) 

 

For further reference on splineType property, please check the user guide below. 

·        https://help.syncfusion.com/flutter/cartesian-charts/chart-types/spline-area-chart#spline-area-rendering-types 

 

Please check with above solution and let us know if you still have further concerns. 

  

Regards, 

Sriram Kiran