Area Chart in Flutter Cartesian Charts (SfCartesianChart)

11 Apr 202220 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.
@override
    Widget build(BuildContext context) {
        final List<ChartData> chartData = [
            ChartData(2010, 35),
            ChartData(2011, 28),
            ChartData(2012, 34),
            ChartData(2013, 32),
            ChartData(2014, 40)
        ];
        return Scaffold(
            body: Center(
                child: Container(
                    child: SfCartesianChart(
                        series: <ChartSeries>[
                            // Renders area chart
                            AreaSeries<ChartData, int>(
                                dataSource: chartData,
                                xValueMapper: (ChartData data, _) => data.x,
                                yValueMapper: (ChartData data, _) => data.y
                            )
                        ]
                    )
                )
            )
        );
    }
    class ChartData {
        ChartData(this.x, this.y);
        final int x;
        final double y;
    }

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 BorderDrawMode.top. The other values are BorderDrawMode.all and BorderDrawMode.excludeBottom.

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

Area border

Area with gradients

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

@override
    Widget build(BuildContext context) {
        final List<ChartData> chartData = [
            ChartData(1924, 400),
            ChartData(1925, 410),
            ChartData(1926, 405),
            ChartData(1927, 410),
            ChartData(1928, 350),
            ChartData(1929, 370),
            ChartData(1930, 500),
            ChartData(1931, 390),
            ChartData(1932, 450),
            ChartData(1933, 440),
            ChartData(1934, 350),
            ChartData(1935, 370),
            ChartData(1936, 480),
            ChartData(1937, 410),
            ChartData(1938, 530),
            ChartData(1939, 520),
            ChartData(1940, 390),
            ChartData(1941, 360),
            ChartData(1942, 405),
            ChartData(1943, 400),
        ];
        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(
                        primaryYAxis: NumericAxis(labelFormat: '{value}mm')
                        series: <ChartSeries>[
                            // Renders area chart
                            AreaSeries<ChartData, int>(
                                dataSource: chartData,
                                xValueMapper: (ChartData data, _) => data.x,
                                yValueMapper: (ChartData data, _) => data.y,
                                 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 EmptyPointMode.gap, EmptyPointMode.zero, EmptyPointMode.drop and EmptyPointMode.average. Default mode of the empty point is EmptyPointMode.gap.

@override
    Widget build(BuildContext context) {
        final List<ChartData> chartData = [
            ChartData(1924, 400),
            ChartData(1925, 410),
            ChartData(1926, 405),
            ChartData(1927, 410),
            ChartData(1928, 350),
            ChartData(1929, 370),
            ChartData(1930, 500),
            ChartData(1931, 390),
            ChartData(1932, null),
            ChartData(1933, null),
            ChartData(1934, null),
            ChartData(1935, null),
            ChartData(1936, null),
            ChartData(1937, 410),
            ChartData(1938, 530),
            ChartData(1939, 520),
            ChartData(1940, 390),
            ChartData(1941, 360),
            ChartData(1942, 405),
            ChartData(1943, 400),
        ];
        return Scaffold(
            body: Center(
                child: Container(
                    child: SfCartesianChart(
                        primaryXAxis: DateTimeAxis(),
                        series: <ChartSeries>[
                            AreaSeries<ChartData, DateTime>(
                                dataSource: chartData,
                                xValueMapper: (ChartData data, _) => data.x,
                                yValueMapper: (ChartData data, _) => data.y,emptyPointSettings:
                                EmptyPointSettings(mode: EmptyPointMode.zero)
                            )
                        ]
                    )
                )
            )
        );
    }

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.

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

Vertical area chart

See Also

Note: You can refer to our Flutter Area Chart feature tour page for its groundbreaking feature representations. You can also explore our Flutter Area Chart example that shows how to easily configure with built-in support for creating stunning visual effects.