Step line Chart in Flutter Cartesian Charts (SfCartesianChart)

11 Apr 20225 minutes to read

To render a step line chart, create an instance of StepLineSeries, and add it to the series collection property of SfCartesianChart. The following properties can be used to customize the appearance of spline segment:

  • color - changes the color of the line.
  • opacity - controls the transparency of the chart series.
  • width - changes the stroke width of the line.
@override
    Widget build(BuildContext context) {
         return Scaffold(
            body: Center(
                child: Container(
                    child: SfCartesianChart(
                        primaryXAxis: DateTimeAxis(),
                        series: <ChartSeries>[
                            // Renders step line chart
                            StepLineSeries<ChartData, DateTime>(
                                dataSource: chartData,
                                xValueMapper: (ChartData data, _) => data.x,
                                yValueMapper: (ChartData data, _) => data.y
                            )
                        ]
                    )
                )   
            )
        );
    }

Step line chart

Dashed step line

The dashArray property of the StepLineSeries is used to render step line series with dashes. Odd value is considered as rendering size and even value is considered as gap.

@override
    Widget build(BuildContext context) {
         return Scaffold(
            body: Center(
                child: Container(
                    child: SfCartesianChart(
                        primaryXAxis: DateTimeAxis(),
                        series: <ChartSeries>[
                            StepLineSeries<ChartData, DateTime>(
                                dataSource: chartData,
                                // Dashes for step line
                                dashArray: <double>[5, 5],
                                xValueMapper: (ChartData data, _) => data.x,
                                yValueMapper: (ChartData data, _) => data.y
                            )
                        ]
                    )
                )   
            )
        );
    }

Step line chart

See Also