Area Chart in Flutter Cartesian Charts (SfCartesianChart)

9 Jun 202115 minutes to read

To create a Flutter area chart quickly, you can check this video.

To render an area chart, create an instance of AreaSeries, and add it to the series collection property of SfCartesianChart. The area chart shows the filled area to represent the data, but when there are more than a series, this may hide the other series. To get rid of this, increase or decrease the transparency of the series.

The following properties can be used to customize the appearance:

  • color - changes the color of the series.
  • opacity - controls the transparency of the chart series.
  • borderWidth - changes the stroke width of the series.
  • borderColor - changes the stroke color of the series.
  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: DateTimeAxis(),
                            series: <ChartSeries>[
                                // Renders area chart
                                AreaSeries<SalesData, dateTime>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                )
                            ]
                        )
                    )
                )
            );
        }

    Area chart

    Border customization

    The borders of the area chart can be customized using the borderDrawMode property. The default value of the borderDrawMode property is top. The other values are all and excludeBottom.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: DateTimeAxis(),
                            series: <ChartSeries>[
                                AreaSeries<SalesData, DateTime>(
                                    dataSource: chartData,
                                    color: Colors.deepOrange[300],
                                    borderMode: AreaBorderMode.excludeBottom,
                                    borderColor: Colors.green,
                                    borderWidth: 2,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                )
                            ]
                        )
                    )
                )
            );
        }

    Area border

    Also refer, color palette, color mapping, animation, gradient and empty points for customizing the area series further.

    Area with gradients

    The gradient property is used to define the gradient colors. The colors from this property is used for series.

  • dart
  • @override
        Widget build(BuildContext context) {
             final List<Color> color = <Color>[];
            color.add(Colors.blue[50]!);
            color.add(Colors.blue[200]!);
            color.add(Colors.blue);
    
            final List<double> stops = <double>[];
            stops.add(0.0);
            stops.add(0.5);
            stops.add(1.0);
    
            final LinearGradient gradientColors =
                LinearGradient(colors: color, stops: stops);
            
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: DateTimeAxis(),
                            series: <ChartSeries>[
                                // Renders area chart
                                AreaSeries<SalesData, DateTime>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales,
                                     gradient: gradientColors
                                )
                            ]
                        )
                    )
                )
            );
        }

    Area gradients

    Area with empty points

    Data points with a null value are considered empty points. Empty data points are ignored and are not plotted in the chart. By using emptyPointSettings property in series, you can decide the action taken for empty points. Available modes are gap, zero, drop and average. Default mode of the empty point is gap.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: DateTimeAxis(),
                            series: <ChartSeries>[
                                AreaSeries<SalesData, DateTime>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                )
                            ]
                        )
                    )
                )
            );
        }

    Area with empty points

    Vertical area chart

    The isTransposed property of CartesianSeries is used to transpose the horizontal and vertical axes, to view the data in a different perspective. Using this feature, you can render vertical area chart.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            isTransposed: true,
                            primaryXAxis: DateTimeAxis(),
                            series: <ChartSeries>[
                                AreaSeries<SalesData, DateTime>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                )
                            ]
                        )
                    )
                )
            );
        }

    Vertical area chart