Search code examples
flutterchartssyncfusionsfcartesianchart

In the Syncfusion chart with Flutter, the lines are added on the previous value


  • Expected result:

Plotting each series with reference to zero.

  • Problem:

The second series is added on the first series value.

  • Graph plotted:

chart

  • Data:

datas

The first series is drawn correctly as 10-10-10. The second series should start from 0 as 0-5-10. But it starts at 10. It's drawn as 10-15-20.

How do I make the second series reference 0?

  • This is how I drew the graph:
SfCartesianChart _buildStackedLineChart() {
    return SfCartesianChart(
      plotAreaBorderWidth: 0,
      backgroundColor: Colors.white,
      title: ChartTitle(text: 'Temperature', textStyle: TextStyle()),
      legend: const Legend(
        isVisible: true,
        position: LegendPosition.top,
        itemPadding: 25,
        padding: 5,
      ),
      primaryXAxis: DateTimeAxis(
        majorGridLines: const MajorGridLines(width: 0),
        dateFormat: DateFormat.H(), 
        intervalType: DateTimeIntervalType.hours, 
      ),
      primaryYAxis: const NumericAxis(
          axisLine: AxisLine(width: 0),
          labelFormat: '{value}°C', 
          majorGridLines: MajorGridLines(width: 0),
          minimum: 0,
        ),
      series: _getStackedLineSeries(),
      trackballBehavior: _trackballBehavior,
    );
  }
  • My full code is as follows:

https://gist.github.com/MucahitZengin/4bc25cec2a26f10af9cf5c84a9db4c39

  • Based on the example shown on this page:

https://flutter.syncfusion.com/#/cartesian-charts/chart-types/stacked-charts/stacked-line-chart

  • The code for the example shown is also here:

https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/stacked_charts/stacked_line_chart.dart


Solution

  • I think I understand the source of the problem. I am using a "stacked line chart". In a stacked line chart the data is stacked. I should use the "default line chart".

    Like this one here:

    https://flutter.syncfusion.com/#/cartesian-charts/chart-types/line/default-line-chart

    The source of the solution:

    https://github.com/syncfusion/flutter-examples/issues/115

    Thank you: SriramKiranSenthilkumar