Cartesian chart types

Line chart

To render a line chart, create an instance of LineSeries, and add it to the series collection property of SfCartesianChart. The following properties are used to customize the appearance:

  • color – Changes the color of the line.
  • opacity - Controls the transparency of the chart series.
  • width – Changes the stroke width of the line.
  • dart
  • @override
        Widget build(BuildContext context) {
            final List<SalesData> chartData = [
                SalesData(2010, 35),
                SalesData(2011, 28),
                SalesData(2012, 34),
                SalesData(2013, 32),
                SalesData(2014, 40)
            ];
    
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries>[
                                // Renders line chart
                                LineSeries<SalesData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                )
                            ]
                        )
                    )
                )
            );
        }
    
        class SalesData {
            SalesData(this.year, this.sales);
                final double year;
                final double sales;
        }

    Line chart

    Dashed line

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

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries>[
                                LineSeries<SalesData, String>(
                                    dataSource: chartData,
                                    // Dash values for line
                                    dashArray: <double>[5,5],
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                )
                            ]
                        )
                    )
                )
            );
        }

    Dashed line chart

    Multi-colored line

    To render a multi-colored line series, map the individual colors to the data using the pointColorMapper property.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: CategoryAxis(),
                            series: <ChartSeries>[
                                LineSeries<SalesData, String>(
                                    dataSource: [
                                        SalesData('Jan', 35, Colors.red),
                                        SalesData('Feb', 28, Colors.green),
                                        SalesData('Mar', 34, Colors.blue),
                                        SalesData('Apr', 32, Colors.pink),
                                        SalesData('May', 40, Colors.black)
                                    ],
                                    // Bind the color for all the data points from the data source
                                    pointColorMapper:(SalesData sales, _) => sales.segmentColor,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                )
                            ]
                        )
                    )
                )
            );
        }
    
        class SalesData {
            SalesData(this.year, this.sales, this.segmentColor);
            final double year;
            final double sales;
            final Color segmentColor;
        }

    Multi-colored line

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

    Fast line chart

    FastLineSeries is a line chart, but it loads faster than LineSeries. You can use this when there are large number of points to be loaded in a chart. To render a fast line chart, create an instance of FastLineSeries, and add it to the series collection property of SfCartesianChart. The following properties are used to customize the appearance of fast line segment:

    • color – Changes the color of the line.
    • opacity - Controls the transparency of the chart series.
    • width – Changes the stroke width of the line.
  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries>[
                                // Renders fast line chart
                                FastLineSeries<SalesData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                )
                            ]
                        )
                    )
                )
            );
        }

    Fast line chart

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

    Area chart

    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 are 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(
                            series: <ChartSeries>[
                                // Renders area chart
                                AreaSeries<SalesData, double>(
                                    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 borderMode property. The default value of the borderMode property is top. The other values are all and excludeBottom.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries>[
                                AreaSeries<SalesData, double>(
                                    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.

    Spline chart

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

    • color – Changes the color of the series.
    • opacity - Controls the transparency of the chart series.
    • width – Changes the stroke width of the series.
  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries>[
                                // Renders spline chart
                                SplineSeries<SalesData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                )
                            ]
                        )
                    )
                )
            );
        }

    Spline border

    Dashed spline

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

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries>[
                                SplineSeries<SalesData, String>(
                                    dataSource: chartData,
                                    // Dash values for spline
                                    dashArray: <double>[5, 5],
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                )
                            ]
                        )
                    )
                )
            );
        }

    Dashed spline chart

    Spline rendering types

    The splineType allows you to change the spline curve in series. The following types are used in SplineSeries:

    • natural
    • monotonic
    • cardinal
    • clamped

    By default, the value of splineType is natural.

    The following code sample demonstrates how to set the splineType value to cardinal. When you set the cardinal type, you can specify the desired line tension of the cardinal spline using the cardinalSplineTension property. The value of this property ranges from 0 to 1.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries>[
                                SplineSeries<SalesData, double>(
                                    dataSource: chartData,
                                    // Type of spline
                                    splineType: SplineType.cardinal,
                                    cardinalSplineTension: 0.9,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                )
                            ]
                        )
                    )
                )
            );
        }

    Spline type

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

    Column chart

    To render a column chart, create an instance of ColumnSeries, and add it to the series collection property of SfCartesianChart. The following properties are 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(
                            series: <ChartSeries>[
                                // Renders column chart
                                ColumnSeries<SalesData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                )
                            ]
                        )
                    )      
                )
            );
        }

    Column chart

    Side-by-side series placement

    By default, all the column series that have the same x and y-axes are placed side by side in a chart. If you want to place a series one over the other (overlapped), set the enableSideBySideSeriesPlacement property of SfCartesianChart to false and configure the width property to differentiate the series. The following code snippet and screenshot illustrate the overlapped placement of column series.

  • dart
  • @override
        Widget build(BuildContext context) {
            final List<SalesData> chartData = [
                SalesData(2010, 35, 23),
                SalesData(2011, 38, 49),
                SalesData(2012, 34, 12),
                SalesData(2013, 52, 33),
                SalesData(2014, 40, 30)
            ];
            
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            // Columns will be rendered back to back
                            enableSideBySideSeriesPlacement: false,
                            series: <ChartSeries>[
                                ColumnSeries<SalesData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                ),
                                ColumnSeries<SalesData, double>(
                                    opacity: 0.9,
                                    width: 0.4,
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.loss
                                )
                            ]
                        )
                    )   
                )
            );
        }

    Column side by side placement

    Column width and spacing

    The spacing property is used to change the spacing between two segments. The default value of spacing is 0, and the value ranges from 0 to 1. Here, 1 and 0 correspond to 100% and 0% of the available space, respectively.

    The width property is used to change the width of the rectangle. The default value of the width is 0.7, and the value ranges from 0 to 1. Here, 1 and 0 correspond to 100% and 0% of the available width, respectively.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries>[
                                ColumnSeries<SalesData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales,
                                    width: 0.8, // Width of the columns
                                    spacing: 0.2 // Spacing between the columns
                                )
                            ]
                        )
                    )   
                )
            );
        }

    Column width and spacing

    Rounded corners

    The borderRadius property is used to add the rounded corners to the rectangle.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries>[
                                ColumnSeries<SalesData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales,
                                    // Sets the corner radius
                                    borderRadius: BorderRadius.all(Radius.circular(15))
                                )
                            ]
                        )
                    )   
                )
            );
        }

    Rounded corners

    Track customization

    Renders column with track. Track is a rectangular bar rendered from the start to the end of the axis. Column series will be rendered above the track. The isTrackVisible property is used to enable the track. The following properties are used to customize the appearance:

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries>[
                                ColumnSeries<SalesData, double>(
                                    dataSource: chartData,
                                    // Renders the track
                                    isTrackVisible: true,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                )
                            ]
                        )
                    )   
                )
            );
        }

    Track

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

    Bar chart

    To render a bar chart, create an instance of BarSeries, and add it to the series collection property of SfCartesianChart. The following properties are 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(
                            series: <ChartSeries>[
                                // Renders bar chart
                                BarSeries<SalesData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                )
                            ]
                        )
                    )   
                )
            );
        }

    Bar chart

    Column width and spacing

    The spacing property is used to change the spacing between two segments. The default value of spacing is 0, and the value ranges from 0 to 1. Here, 1 and 0 correspond to 100% and 0% of the available space, respectively.

    The width property is used to change the width of the rectangle. The default value of the width is 0.7, and the value ranges from 0 to 1. Here, 1 and 0 correspond to 100% and 0% of the available width, respectively.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries>[
                                BarSeries<SalesData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales,
                                    width: 0.6, // Width of the bars
                                    spacing: 0.3 // Spacing between the bars
                                )
                            ]
                        )
                    )   
                )
            );
        }

    Bar width and spacing

    Rounded corners

    The borderRadius property is used to add the rounded corners to the rectangle.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries>[
                                BarSeries<SalesData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales,
                                    borderRadius: BorderRadius.all(Radius.circular(15))
                                )
                            ]
                        )
                    )   
                )
            );
        }

    Bar rounded corners

    Track customization

    You can render the bar chart with track. Track is a rectangular bar rendered from the start to the end of the axis. Bar series will be rendered above the track. The isTrackVisible property is used to enable the track. The following properties are used to customize the appearance:

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries>[
                                BarSeries<SalesData, double>(
                                    dataSource: chartData,
                                    // Renders the track
                                    isTrackVisible: true,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                )
                            ]
                        )
                    )   
                )
            );
        }

    Bar track

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

    Bubble chart

    To render a bubble chart, create an instance of BubbleSeries, and add it to the series collection property of SfCartesianChart.

    Bubble chart requires three fields (X, Y, and Size) to plot a point. Here, sizeValueMapper is used to map the size of each bubble segment from data source.

    • color – Changes the color of the series.
    • opacity - Controls the transparency of the chart series.
    • borderColor – Changes the stroke width of the series.
    • borderWidth – Changes the stroke color of the series.
  • dart
  • @override
        Widget build(BuildContext context) {
             final List<ChartData> chartData = [
                ChartData(2010, 35, 0.32),
                ChartData(2011, 38, 0.21),
                ChartData(2012, 34, 0.38),
                ChartData(2013, 52, 0.29),
                ChartData(2014, 40, 0.34)
            ];
    
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries>[
                                // Renders bubble chart
                                BubbleSeries<ChartData, double>(
                                    dataSource: chartData,
                                    sizeValueMapper: (ChartData sales, _) => sales.size,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y
                                )
                            ]
                        )
                    )   
                )
            );
        }
    
        class ChartData {
            ChartData(this.x, this.y, this.size);
                final double x;
                final double y;
                final double size;
        }

    Bubble chart

    Change the min and max radius of bubble

    The minimumRadius property is used to change the minimum size of the series and the maximumRadius property is used to change the maximum size of the series.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries>[
                                BubbleSeries<ChartData, double>(
                                    dataSource: chartData,
                                    sizeValueMapper: (ChartData sales, _) => sales.size,
                                    minimumRadius:9, // Minimum radius of bubble
                                    maximumRadius: 15, // Maximum radius of bubble
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y
                                )
                            ]
                        )
                    )   
                )
            );
        }

    Bubble size

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

    Scatter chart

    To render a scatter chart, create an instance of ScatterSeries, and add it to the series collection property of SfCartesianChart. The following properties are used to customize the scatter segment 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(
                            series: <ChartSeries>[
                                // Renders scatter chart
                                ScatterSeries<ChartData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y
                                )
                            ]
                        )
                    )   
                )
            );
        }

    Scatter chart

    Change shape and size of the scatter

    The shape property is used to change the rendering shape of scatter series. The available shapes are circle, rectangle, pentagon, verticalLine, horizontalLine, diamond, triangle, image, and invertedTriangle. If image shape is specified, then you can assign the image using the imageUrl property.

    The height and width properties of markerSettings are used to change the height and width of the scatter series, respectively.

  • dart
  • @override
        Widget build(BuildContext context) {
             return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries>[
                                ScatterSeries<ChartData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y,
                                    markerSettings: MarkerSettings(
                                        height: 15,
                                        width: 15,
                                        // Scatter will render in diamond shape
                                        shape: DataMarkerType.diamond
                                    )
                                )
                            ]
                        )
                    )   
                )
            );
        }

    Scatter shape

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

    Step line chart

    To render a step line chart, create an instance of StepLineSeries, and add it to the series collection property of SfCartesianChart. The following properties are 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.
  • dart
  • @override
        Widget build(BuildContext context) {
             return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries>[
                                // Renders step line chart
                                StepLineSeries<ChartData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.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.

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

    Step line chart

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

    Range column chart

    To render a range column chart, create an instance of RangeColumnSeries and add to the series collection property of SfCartesianChart.

    Since the RangeColumnSeries requires two Y values for a point, your data should contain high and low values. High and low value specifies the maximum and minimum range of the point.

    • ‘highValueMapper’ - Field in the data source, which is considered as high value for the data points.
    • lowValueMapper - Field in the data source, which is considered as low value for the data points.
  • dart
  • @override
        Widget build(BuildContext context) {
             return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: CategoryAxis(),
                            series: <ChartSeries>[
                                RangeColumnSeries<ChartData, double>(
                                    dataSource: <ChartData>[
                                        ChartData('Jan', 3, 9),
                                        ChartData('Feb', 4, 11),
                                        ChartData('Mar', 6, 13),
                                        ChartData('Apr', 9, 17),
                                        ChartData('May', 12, 20),
                                    ],
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    lowValueMapper: (ChartData sales, _) => sales.low,
                                    highValueMapper: (ChartData sales, _) => sales.high,
                                )
                            ]
                        )
                    )   
                )
            );
        }
    
        class ChartData {
            ChartData(this.x, this.high, this.low);
                final String x;
                final double high;
                final double low;
        }

    Range column chart

    Data label

    In the range column chart when data label is enabled, by default there will be two values displayed namely, high and low, but in the other types of charts, only y value will be displayed.

  • dart
  • @override
        Widget build(BuildContext context) {
             return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: CategoryAxis(),
                            series: <ChartSeries>[
                                RangeColumnSeries<ChartData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    lowValueMapper: (ChartData sales, _) => sales.low,
                                    highValueMapper: (ChartData sales, _) => sales.high,
                                    dataLabelSettings: DataLabelSettings(
                                        isVisible: true, 
                                        position: CartesianLabelPosition.top
                                    ),
                                )
                            ]
                        )
                    )   
                )
            );
        }

    Range column datalabel

    Stacked line chart

    To render a stacked line chart, create an instance of StackedLineSeries, and add it to the series collection property of SfCartesianChart. The following properties are used to customize the appearance of stacked line series:

    • color – Changes the color of the line.
    • opacity – Controls the transparency of the chart series.
    • width – Changes the stroke width of the line.
  • dart
  • @override
        Widget build(BuildContext context) {
             return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries>[
                                StackedLineSeries<ChartData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y1
                                ),
                                StackedLineSeries<ChartData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y2
                                ),
                                 StackedLineSeries<ChartData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y3
                                ),
                                StackedLineSeries<ChartData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y4
                                )
                            ]
                        )
                    )   
                )
            );
        }

    Stacked line chart

    Grouping series

    You can group and stack the similar stacked series types using the groupName property of stacked series. The stacked series that contains the same groupName will be stacked in a single group.

  • dart
  • @override
        Widget build(BuildContext context) {
             return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries>[
                                StackedLineSeries<ChartData, double>(
                                    groupName: 'Group A',
                                    dataLabelSettings: DataLabelSettings(
                                        isVisible: true,
                                        useSeriesColor: true
                                    ),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y1
                                ),
                                StackedLineSeries<ChartData, double>(
                                    groupName: 'Group B',
                                    dataLabelSettings: DataLabelSettings(
                                        isVisible: true,
                                        useSeriesColor: true
                                    ),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y2
                                ),
                                StackedLineSeries<ChartData, double>(
                                    groupName: 'Group A',
                                    dataLabelSettings: DataLabelSettings(
                                        isVisible: true,
                                        useSeriesColor: true
                                    ),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y3
                                ),
                            ]
                        )
                    )   
                )
            );
        }

    Stacked line grouping

    Display cumulative values

    You can show the cumulative data label values using the showCumulativeValues property. If the series are grouped using groupName, then cumulative values will be shown based on grouping.

  • dart
  • @override
        Widget build(BuildContext context) {
             return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries>[
                                StackedLineSeries<ChartData, double>(
                                    groupName: 'Group A',
                                    dataLabelSettings: DataLabelSettings(
                                        isVisible: true,
                                        showCumulativeValues: true,
                                        useSeriesColor: true
                                    ),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y1
                                ),
                                StackedLineSeries<ChartData, double>(
                                    groupName: 'Group B',
                                    dataLabelSettings: DataLabelSettings(
                                        isVisible: true,
                                        showCumulativeValues: true,
                                        useSeriesColor: true
                                    ),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y2
                                ),
                                StackedLineSeries<ChartData, double>(
                                    groupName: 'Group A',
                                    dataLabelSettings: DataLabelSettings(
                                        isVisible: true,
                                        showCumulativeValues: true,
                                        useSeriesColor: true
                                    ),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y3
                                ),
                            ]
                        )
                    )   
                )
            );
        }

    Stacked line cumulative

    Stacked area chart

    To render a stacked area chart, create an instance of StackedAreaSeries, and add it to the series collection property of SfCartesianChart. The following properties are used to customize the appearance of stacked line series:

    • color – Changes the color of the line.
    • 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(
                            series: <ChartSeries>[
                                StackedAreaSeries<ChartData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y1
                                ),
                                StackedAreaSeries<ChartData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y2
                                ),
                                StackedAreaSeries<ChartData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y3
                                ),
                            ]
                        )
                    )   
                )
            );
        }

    Stacked area

    Grouping series

    You can group and stack the similar stacked series types using the groupName property of stacked series. The stacked series that contains the same groupName will be stacked in a single group.

  • dart
  • @override
        Widget build(BuildContext context) {
             return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries>[
                                StackedAreaSeries<ChartData, double>(
                                    groupName: 'Group A',
                                    dataLabelSettings: DataLabelSettings(
                                        isVisible: true,
                                        useSeriesColor: true
                                    ),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y1
                                ),
                                StackedAreaSeries<ChartData, double>(
                                    groupName: 'Group B',
                                    dataLabelSettings: DataLabelSettings(
                                        isVisible: true,
                                        useSeriesColor: true
                                    ),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y2
                                ),
                                StackedAreaSeries<ChartData, double>(
                                    groupName: 'Group A',
                                    dataLabelSettings: DataLabelSettings(
                                        isVisible: true,
                                        useSeriesColor: true
                                    ),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y3
                                ),
                            ]
                        )
                    )   
                )
            );
        }

    Stacked area grouping

    Display cumulative values

    You can show the cumulative data label values using the showCumulativeValues property. If the series are grouped using groupName, then cumulative values will be shown based on grouping.

  • dart
  • @override
        Widget build(BuildContext context) {
             return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries>[
                                StackedAreaSeries<ChartData, double>(
                                    groupName: 'Group A',
                                    dataLabelSettings: DataLabelSettings(
                                        isVisible: true,
                                        showCumulativeValues: true,
                                        useSeriesColor: true
                                    ),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y1
                                ),
                                StackedAreaSeries<ChartData, double>(
                                    groupName: 'Group B',
                                    dataLabelSettings: DataLabelSettings(
                                        isVisible: true,
                                        showCumulativeValues: true,
                                        useSeriesColor: true
                                    ),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y2
                                ),
                                StackedAreaSeries<ChartData, double>(
                                    groupName: 'Group A',
                                    dataLabelSettings: DataLabelSettings(
                                        isVisible: true,
                                        showCumulativeValues: true,
                                        useSeriesColor: true
                                    ),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y3
                                ),
                            ]
                        )
                    )   
                )
            );
        }

    Stacked area cumulative

    Stacked column chart

    To render a stacked column chart, create an instance of StackedColumnSeries, and add it to the series collection property of SfCartesianChart. The following properties are used to customize the appearance of stacked line series:

    • color – Changes the color of the line.
    • 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(
                            series: <ChartSeries>[
                                StackedColumnSeries<ChartData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y1
                                ),
                                StackedColumnSeries<ChartData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y2
                                ),
                                 StackedColumnSeries<ChartData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y3
                                ),
                                StackedColumnSeries<ChartData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y4
                                )
                            ]
                        )
                    )   
                )
            );
        }

    Stacked column

    Grouping series

    You can group and stack the similar stacked series types using the groupName property of stacked series. The stacked series that contains the same groupName will be stacked in a single group.

  • dart
  • @override
        Widget build(BuildContext context) {
             return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries>[
                                StackedColumnSeries<ChartData, double>(
                                    groupName: 'Group A',
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y1
                                ),
                                StackedColumnSeries<ChartData, double>(
                                    groupName: 'Group B',
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y2
                                ),
                                StackedColumnSeries<ChartData, double>(
                                    groupName: 'Group A',
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y3
                                ),
                                StackedColumnSeries<ChartData, double>(
                                    groupName: 'Group B',
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y4
                                )
                            ]
                        )
                    )   
                )
            );
        }

    Stacked column grouping

    Display cumulative values

    You can show the cumulative data label values using the showCumulativeValues property. If the series are grouped using groupName, then cumulative values will be shown based on grouping.

  • dart
  • @override
        Widget build(BuildContext context) {
             return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries>[
                                StackedColumnSeries<ChartData, double>(
                                    groupName: 'Group A',
                                    dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y1
                                ),
                                StackedColumnSeries<ChartData, double>(
                                    groupName: 'Group B',
                                    dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y2
                                ),
                                StackedColumnSeries<ChartData, double>(
                                    groupName: 'Group A',
                                    dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y3
                                ),
                                StackedColumnSeries<ChartData, double>(
                                    groupName: 'Group B',
                                    dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y4
                                )
                            ]
                        )
                    )   
                )
            );
        }

    Stacked column cumulative

    Stacked bar chart

    To render a stacked bar chart, create an instance of StackedBarSeries, and add it to the series collection property of SfCartesianChart. The following properties are used to customize the appearance of stacked line series:

    • color – Changes the color of the line.
    • 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(
                            series: <ChartSeries>[
                                StackedBarSeries<ChartData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y1
                                ),
                                StackedBarSeries<ChartData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y2
                                ),
                                 StackedBarSeries<ChartData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y3
                                ),
                                StackedBarSeries<ChartData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y4
                                )
                            ]
                        )
                    )   
                )
            );
        }

    Stacked bar

    Grouping series

    You can group and stack the similar stacked series types using the groupName property of stacked series. The stacked series that contains the same groupName will be stacked in a single group.

  • dart
  • @override
        Widget build(BuildContext context) {
             return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries>[
                                StackedBarSeries<ChartData, double>(
                                    groupName: 'Group A',
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y1
                                ),
                                StackedBarSeries<ChartData, double>(
                                    groupName: 'Group B',
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y2
                                ),
                                StackedBarSeries<ChartData, double>(
                                    groupName: 'Group A',
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y3
                                ),
                                StackedBarSeries<ChartData, double>(
                                    groupName: 'Group B',
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y4
                                )
                            ]
                        )
                    )   
                )
            );
        }

    Stacked bar grouping

    Display cumulative values

    You can show the cumulative data label values using the showCumulativeValues property. If the series are grouped using groupName, then cumulative values will be shown based on grouping.

  • dart
  • @override
        Widget build(BuildContext context) {
             return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries>[
                                StackedBarSeries<ChartData, double>(
                                    groupName: 'Group A',
                                    dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y1
                                ),
                                StackedBarSeries<ChartData, double>(
                                    groupName: 'Group B',
                                    dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y2
                                ),
                                StackedBarSeries<ChartData, double>(
                                    groupName: 'Group A',
                                    dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y3
                                ),
                                StackedBarSeries<ChartData, double>(
                                    groupName: 'Group B',
                                    dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y4
                                )
                            ]
                        )
                    )   
                )
            );
        }

    Stacked bar cumulative