Chart types in Cartesian charts

14 Apr 2021 / 24 minutes to read

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 can be 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(
                            primaryXAxis: DateTimeAxis(),
                            series: <ChartSeries>[
                                // Renders line chart
                                LineSeries<SalesData, dateTime>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                )
                            ]
                        )
                    )
                )
            );
        }
    
        class SalesData {
            SalesData(this.year, this.sales);
                final dateTime 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) {
            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(
                            primaryXAxis: DateTimeAxis(),
                            series: <ChartSeries>[
                                LineSeries<SalesData, DateTime>(
                                    dataSource: chartData,
                                    // Dash values for line
                                    dashArray: <double>[5, 5],
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales)
                            ]
                        )
                    )
                )
            );
      }

    Dashed line chart

    See Also

    *Applying dashed pattern for 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 String 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 can be 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(
                            primaryXAxis: DateTimeAxis(),
                            series: <ChartSeries>[
                                // Renders fast line chart
                                FastLineSeries<SalesData, DateTime>(
                                    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 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

    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 can be 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(
                            primaryXAxis: DateTimeAxis(),
                            series: <ChartSeries>[
                                // Renders spline chart
                                SplineSeries<SalesData, DateTime>(
                                    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(
                            primaryXAxis: DateTimeAxis(),
                            series: <ChartSeries>[
                                SplineSeries<SalesData, DateTime>(
                                    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 can be 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(
                            primaryXAxis: DateTimeAxis(),
                            series: <ChartSeries>[
                                SplineSeries<SalesData, DateTime>(
                                    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.

    Vertical spline 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 Spline chart.

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

    Vertical spline chart

    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 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(
                            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(
                            primaryXAxis: DateTimeAxis(),
                            // Columns will be rendered back to back
                            enableSideBySideSeriesPlacement: false,
                            series: <ChartSeries>[
                                ColumnSeries<SalesData, DateTime>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                ),
                                ColumnSeries<SalesData, DateTime>(
                                    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

    See Also

    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 can be 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 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(
                            series: <ChartSeries>[
                                // Renders bar chart
                                BarSeries<SalesData, double>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                )
                            ]
                        )
                    )   
                )
            );
        }

    Bar chart

    Bar 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 can be 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.

    See Also

    *Create vertical bar chart.

    *Create horizontal bar chart

    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(
                            primaryXAxis: DateTimeAxis(),
                            series: <ChartSeries>[
                                // Renders bubble chart
                                BubbleSeries<ChartData, DateTime>(
                                    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 DateTime 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(
                            primaryXAxis: DateTimeAxis(),
                            series: <ChartSeries>[
                                BubbleSeries<ChartData, DateTime>(
                                    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.

    Bubble with various color

    Using the pointColorMapper and sizeValueMapper properties in the Cartesian charts, the Bubble series with different colors and sizes can be rendered.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: CategoryAxis(),
                            series: <ChartSeries>[
                                BubbleSeries<ChartData, String>(
                                    dataSource: chartData,
                                    sizeValueMapper: (ChartData sales, _) => sales.size,
                                    pointColorMapper:(ChartData sales, _) => sales.pointColor,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y
                                )
                            ]
                        )
                    )   
                )
            );
        }

    Bubble various color

    Bubble 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: CategoryAxis(),
                            series: <CartesianSeries>[
                                BubbleSeries<ChartData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y,
                                     sizeValueMapper:(ChartData sales, _) => sales.size,
                                    // Applies gradient color
                                    gradient: gradientColors
                                )
                            ]
                        )
                    )
                )
            );
        }

    Bubble gradients

    Bubble with multiple series

    Using the datasource property in the Map charts, multiple series can be rendered in a bubble chart.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries>[
                                BubbleSeries<ChartData, num>(
                                      dataSource: northAmerica,
                                      xValueMapper: (ChartData sales, _) => sales.xValue,
                                      yValueMapper: (ChartData sales, _) => sales.y,
                                      sizeValueMapper: (ChartData sales, _) => sales.size),
                                BubbleSeries<ChartData, num>(
                                      dataSource: europe,
                                      xValueMapper: (ChartData sales, _) => sales.xValue,
                                      yValueMapper: (ChartData sales, _) => sales.y,
                                      sizeValueMapper:(ChartData sales, _) => sales.size),
                                BubbleSeries<ChartData, num>(
                                      dataSource: asia,
                                      xValueMapper: (ChartData sales, _) => sales.xValue,
                                      yValueMapper: (ChartData sales, _) => sales.y,
                                      sizeValueMapper: (ChartData sales, _) => sales.size),
                                BubbleSeries<ChartData, num>(
                                      dataSource: africa,
                                      xValueMapper: (ChartData sales, _) => sales.xValue,
                                      yValueMapper: (ChartData sales, _) => sales.y,
                                      sizeValueMapper: (ChartData sales, _) => sales.size),
                            ]
                        )
                    )   
                )
            );
        }

    Bubble nultiple series

    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 can be 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(
                            primaryXAxis: DateTimeAxis(),
                            series: <ChartSeries>[
                                // Renders scatter chart
                                ScatterSeries<ChartData, DateTime>(
                                    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 image property.

    The height and width properties of markerSettings can be 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(
                            primaryXAxis: DateTimeAxis(),
                            series: <ChartSeries>[
                                ScatterSeries<ChartData, DateTime>(
                                    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 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.
  • dart
  • @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 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(
                            primaryXAxis: DateTimeAxis(),
                            series: <ChartSeries>[
                                StepLineSeries<ChartData, DateTime>(
                                    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, String>(
                                    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, String>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    lowValueMapper: (ChartData sales, _) => sales.low,
                                    highValueMapper: (ChartData sales, _) => sales.high,
                                    dataLabelSettings: DataLabelSettings(
                                        isVisible: true, 
                                        labelAlignment: ChartDataLabelAlignment.top
                                    ),
                                )
                            ]
                        )
                    )   
                )
            );
        }

    Range column datalabel

    Transposed range column

    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 range column chart.

  • dart
  • @override
        Widget build(BuildContext context) {
             return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            isTransposed: true,
                            primaryXAxis: CategoryAxis(),
                            series: <ChartSeries>[
                                RangeColumnSeries<ChartData, String>(
                                    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 area chart

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

    Since the RangeAreaSeries 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: DateTimeAxis(),
                            series: <ChartSeries>[
                                RangeAreaSeries<ChartData, DateTime>(
                                    dataSource: chartData,
                                    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 DateTime x;
                final double high;
                final double low;
        }

    Range area chart

    Border customization

    The borders of the range area chart can be customized using the borderDrawMode property. The default value of the RangeAreaBorderMode property is all and the other value is excludeSides.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: DateTimeAxis(),
                            series: <ChartSeries>[
                                RangeAreaSeries<SalesData, DateTime>(
                                    dataSource: chartData,
                                    color: Color.fromRGB(224, 242, 241,1),
                                    borderDrawMode: RangeAreaBorderMode.excludeSides,
                                    borderColor: Colors.green,
                                    borderWidth: 2,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                )
                            ]
                        )
                    )
                )
            );
        }

    Range area border

    Spline area chart

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

    • 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(
                            primaryXAxis: DateTimeAxis(),
                            series: <ChartSeries>[
                                SplineAreaSeries<SalesData, DateTime>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                ),
                                SplineAreaSeries<SalesData, DateTime>(
                                    dataSource: chartData1,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                ),
                            ]
                        )
                    )
                )
            );
        }

    Spline area chart

    Dashed spline area

    The dashArray property of the SplineAreaSeries is used to render spline area 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(
                            primaryXAxis: DateTimeAxis(),
                            series: <ChartSeries>[
                                SplineAreaSeries<SalesData, DateTime>(
                                    dataSource: chartData,
                                    dashArray: <double>[5, 5],
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                )
                            ]
                        )
                    )
                )
            );
        }

    Dashed spline area chart

    Spline area rendering types

    The splineType allows you to change the spline area curve in series. The following types can be used in SplineAreaSeries:

    • 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(
                            primaryXAxis: DateTimeAxis(),
                            series: <ChartSeries>[
                                SplineAreaSeries<SalesData, DateTime>(
                                    dataSource: chartData,
                                    splineType: SplineType.cardinal,
                                    cardinalSplineTension: 0.9,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                )
                            ]
                        )
                    )
                )
            );
        }

    Spline area type

    Spline range area chart

    To render a spline range area chart, create an instance of the SplineRangeAreaSeries, and add to the series collection property of SfCartesianChart.

    SplineRangeAreaSeries requires two Y values for a point, data should contain high and low values. The high and low values specify the maximum and minimum ranges of a 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(
                            series: <CartesianSeries<SalesData, num>>[
                            SplineRangeAreaSeries<SalesData, num>(
                              dataSource: chartData,
                              xValueMapper: (SalesData sales, _) => sales.xValue,
                              lowValueMapper: (SalesData sales, _) =>
                                  sales.lowValue,
                              highValueMapper: (SalesData sales, _) =>
                                  sales.highValue,),
                        ]
                    )
                 )
              )
           );
        }

    splinerangearea

    Spline rendering types

    The splineType allows you to change the spline curve in series. The following types can be used in SplineRangeAreaSeries.

    • 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: <CartesianSeries<SalesData, num>>[
                                SplineRangeAreaSeries<SalesData, num>(
                                    dataSource: chartData,
                                    splineType: SplineType.cardinal,
                                    cardinalSplineTension: 0.8,
                                    xValueMapper: (SalesData sales, _) => sales.xValue,
                                    lowValueMapper: (SalesData sales, _) => sales.lowValue,
                                    highValueMapper: (SalesData sales, _) => sales.highValue
                                )
                            ]
                        )
                    )
                )
            );
        }

    splinerangearea

    Border customization

    The borders of the spline range area chart can be customized using the borderDrawMode property. The default value of the borderDrawMode property is all and the other value is excludeSides.

  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <CartesianSeries<SalesData, num>>[
                                SplineRangeAreaSeries<SalesData, num>(
                                    borderDrawMode: RangeAreaBorderMode.all,
                                    borderWidth:2,
                                    borderColor: Colors.red
                                )
                            ]
                        )
                    )
                )
            );
        }

    splinerangearea_bordermode

    Step area chart

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

    • 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(
                            primaryXAxis: DateTimeAxis(),
                            series: <ChartSeries>[
                                StepAreaSeries<SalesData, DateTime>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                ),
                                StepAreaSeries<SalesData, DateTime>(
                                    dataSource: chartData1,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                )
                            ]
                        )
                    )
                )
            );
        }

    Step area chart

    Dashed step area

    The dashArray property of the StepAreaSeries is used to render spline area 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(
                            primaryXAxis: DateTimeAxis(),
                            series: <ChartSeries>[
                                StepAreaSeries<SalesData, DateTime>(
                                    dataSource: chartData,
                                    dashArray: <double>[5, 5],
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                )
                            ]
                        )
                    )
                )
            );
        }

    Dashed step area chart

    Histogram chart

    Histogram chart is a graphical representation that organizes a group of data points into user-specified ranges. It is similar in appearance to a bar chart. The histogram condenses a data series into an easily interpreted visual by taking many data points and grouping them into logical ranges.

    To render a histogram chart, create an instance of HistogramSeries and add to the series collection property of SfCartesianChart.

    You can customize intervals using the binInterval property. Interval value by which the data points are grouped and rendered as bars, in histogram series.

    For example, if the binInterval is set to 20, the x-axis will split with 20 as the interval. The first bar in the histogram represents the count of values lying between 0 to 20 in the provided data and the second bar will represent 20 to 40.

    If no value is specified for this property, then the interval will be calculated automatically based on the data points count and value.

    You can collapse the normal distribution curve using the showNormalDistributionCurve property. You can use the following properties 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.
    • curveColor - changes the color of the normal distribution curve.
    • curveWidth - changes the width of the normal distribution curve.
    • curveDashArray - renders the normal distribution curve with dashes.
  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries>[
                                HistogramSeries<SalesDaa, num>(
                                    dataSource: chartData,
                                    yValueMapper: (SalesData sales, _) => sales.yValue,
                                    binInterval: 20,
                                    showNormalDistributionCurve: true,
                                    curveColor: const Color.fromRGBO(192, 108, 132, 1),
                                    borderWidth: 3
                                ),
                            ]
                        )
                    )
                 )
            );
        }

    histogram chart

    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 can be 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(
                            primaryXAxis: CategoryAxis(),
                            series: <ChartSeries>[
                                StackedLineSeries<ChartData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y1
                                ),
                                StackedLineSeries<ChartData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y2
                                ),
                                 StackedLineSeries<ChartData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y3
                                ),
                                StackedLineSeries<ChartData, String>(
                                    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(
                            primaryXAxis: CategoryAxis(),
                            series: <ChartSeries>[
                                StackedLineSeries<ChartData, String>(
                                    groupName: 'Group A',
                                    dataLabelSettings: DataLabelSettings(
                                        isVisible: true,
                                        useSeriesColor: true
                                    ),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y1
                                ),
                                StackedLineSeries<ChartData, String>(
                                    groupName: 'Group B',
                                    dataLabelSettings: DataLabelSettings(
                                        isVisible: true,
                                        useSeriesColor: true
                                    ),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y2
                                ),
                                StackedLineSeries<ChartData, String>(
                                    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(
                            primaryXAxis: CategoryAxis(),
                            series: <ChartSeries>[
                                StackedLineSeries<ChartData, String>(
                                    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, String>(
                                    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, String>(
                                    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 can be 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(
                            primaryXAxis: CategoryAxis(),
                            series: <ChartSeries>[
                                StackedAreaSeries<ChartData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y1
                                ),
                                StackedAreaSeries<ChartData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y2
                                ),
                                StackedAreaSeries<ChartData, String>(
                                    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(
                            primaryXAxis: CategoryAxis(),
                            series: <ChartSeries>[
                                StackedAreaSeries<ChartData, String>(
                                    groupName: 'Group A',
                                    dataLabelSettings: DataLabelSettings(
                                        isVisible: true,
                                        useSeriesColor: true
                                    ),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y1
                                ),
                                StackedAreaSeries<ChartData, String>(
                                    groupName: 'Group B',
                                    dataLabelSettings: DataLabelSettings(
                                        isVisible: true,
                                        useSeriesColor: true
                                    ),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y2
                                ),
                                StackedAreaSeries<ChartData, String>(
                                    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(
                            primaryXAxis: CategoryAxis(),
                            series: <ChartSeries>[
                                StackedAreaSeries<ChartData, String>(
                                    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, String>(
                                    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, String>(
                                    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 can be 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(
                            primaryXAxis: CategoryAxis(),
                            series: <ChartSeries>[
                                StackedColumnSeries<ChartData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y1
                                ),
                                StackedColumnSeries<ChartData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y2
                                ),
                                 StackedColumnSeries<ChartData,String>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y3
                                ),
                                StackedColumnSeries<ChartData, String>(
                                    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(
                            primaryXAxis: CategoryAxis(),
                            series: <ChartSeries>[
                                StackedColumnSeries<ChartData, String>(
                                    groupName: 'Group A',
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y1
                                ),
                                StackedColumnSeries<ChartData, String>(
                                    groupName: 'Group B',
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y2
                                ),
                                StackedColumnSeries<ChartData, String>(
                                    groupName: 'Group A',
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y3
                                ),
                                StackedColumnSeries<ChartData, String>(
                                    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(
                            primaryXAxis: CategoryAxis(),
                            series: <ChartSeries>[
                                StackedColumnSeries<ChartData, String>(
                                    groupName: 'Group A',
                                    dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y1
                                ),
                                StackedColumnSeries<ChartData, String>(
                                    groupName: 'Group B',
                                    dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y2
                                ),
                                StackedColumnSeries<ChartData, String>(
                                    groupName: 'Group A',
                                    dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y3
                                ),
                                StackedColumnSeries<ChartData, String>(
                                    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 can be 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(
                            primaryXAxis: CategoryAxis(),
                            series: <ChartSeries>[
                                StackedBarSeries<ChartData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y1
                                ),
                                StackedBarSeries<ChartData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y2
                                ),
                                 StackedBarSeries<ChartData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y3
                                ),
                                StackedBarSeries<ChartData, String>(
                                    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(
                            primaryXAxis: CategoryAxis(),
                            series: <ChartSeries>[
                                StackedBarSeries<ChartData, String>(
                                    groupName: 'Group A',
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y1
                                ),
                                StackedBarSeries<ChartData, String>(
                                    groupName: 'Group B',
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y2
                                ),
                                StackedBarSeries<ChartData, String>(
                                    groupName: 'Group A',
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y3
                                ),
                                StackedBarSeries<ChartData, String>(
                                    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(
                            primaryXAxis: CategoryAxis(),
                            series: <ChartSeries>[
                                StackedBarSeries<ChartData, String>(
                                    groupName: 'Group A',
                                    dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y1
                                ),
                                StackedBarSeries<ChartData, String>(
                                    groupName: 'Group B',
                                    dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y2
                                ),
                                StackedBarSeries<ChartData, String>(
                                    groupName: 'Group A',
                                    dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y3
                                ),
                                StackedBarSeries<ChartData, String>(
                                    groupName: 'Group B',
                                    dataLabelSettings: DataLabelSettings(isVisible:true, showCumulativeValues: true),
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.x,
                                    yValueMapper: (ChartData sales, _) => sales.y4
                                )
                            ]
                        )
                    )   
                )
            );
        }

    Stacked bar cumulative

    100% Stacked Area Chart

    To render a 100% stacked area chart, create an instance of StackingArea100Series and add to the series collection property of SfCartesianChart. You can use the following properties to customize the 100% stacked area 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.
    • borderDrawMode - specifies the type of the border mode and it defaults to top.
  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: DateTimeAxis(),
                            series: <ChartSeries>[
                                StackedArea100Series<ChartData, DateTime>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.year,
                                    yValueMapper: (ChartData sales, _) => sales.sales1
                                ),
                                StackedArea100Series<ChartData, DateTime>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.year,
                                    yValueMapper: (ChartData sales, _) => sales.sales2
                                ),
                                StackedArea100Series<ChartData, DateTime>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.year,
                                    yValueMapper: (ChartData sales, _) => sales.sales3
                                ),
                                StackedArea100Series<ChartData, DateTime>(
                                    dataSource: chartData,
                                    xValueMapper: (ChartData sales, _) => sales.year,
                                    yValueMapper: (ChartData sales, _) => sales.sales4
                                )
                            ]
                        )
                    )
                )
            );
        }

    Stacked 100Area chart

    100% Stacked Column Chart

    To render a 100% stacked column chart, create an instance of StackedColumn100Series, and add it to the series collection property of SfCartesianChart. 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.
    • borderRadius - used to add the rounded corners to the rectangle.
  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: CategoryAxis(),
                            series: <ChartSeries>[
                                StackedColumn100Series<SalesData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                ),
                                StackedColumn100Series<SalesData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales2
                                ),
                                StackedColumn100Series<SalesData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales3
                                ),
                                StackedColumn100Series<SalesData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales4
                                )
                            ]
                        )
                    )      
                )
            );
        }

    Stacked 100 column 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(
                            primaryXAxis: CategoryAxis(),
                            series: <ChartSeries>[
                                StackedColumn100Series<SalesData, String>(
                                    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
                                ),
                                StackedColumn100Series<SalesData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales2,
                                    width: 0.8, // Width of the columns
                                    spacing: 0.2 // Spacing between the columns
                                )
                            ]
                        )
                    )   
                )
            );
        }

    Stacked 100 column width and spacing

    100% Stacked Bar Chart

    To render a 100% stacked bar chart, create an instance of StackedBar100Series, and add it to the series collection property of SfCartesianChart. 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.
    • borderRadius - used to add the rounded corners to the rectangle.
  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: CategoryAxis(),
                            series: <ChartSeries>[
                                StackedBar100Series<SalesData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                ),
                                StackedBar100Series<SalesData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales2
                                ),
                                StackedBar100Series<SalesData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales3
                                ),
                                StackedBar100Series<SalesData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales4
                                )
                            ]
                        )
                    )      
                )
            );
        }

    Stacked 100 bar chart

    Bar 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(
                            primaryXAxis: CategoryAxis(),
                            series: <ChartSeries>[
                                StackedBar100Series<SalesData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales,
                                    width: 0.8, 
                                    spacing: 0.2 
                                ),
                                StackedBar100Series<SalesData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales2,
                                    width: 0.8, 
                                    spacing: 0.2 
                                )
                            ]
                        )
                    )   
                )
            );
        }

    Stacked 100 bar width and spacing

    100% Stacked Line Chart

    To render a 100% stacked line chart, create an instance of StackedLine100Series, and add it to the series collection property of SfCartesianChart. The following properties can be 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) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: CategoryAxis(),
                            series: <ChartSeries>[
                                StackedLine100Series<SalesData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                ),
                                StackedLine100Series<SalesData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales2
                                ),
                                StackedLine100Series<SalesData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales3
                                ),
                                StackedLine100Series<SalesData, String>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales4
                                )
                            ]
                        )
                    )
                )
            );
        }

    Stacked 100 line chart

    Dashed line

    The dashArray property of StackedLine100Series 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(
                            primaryXAxis: CategoryAxis(),
                            series: <ChartSeries>[
                                StackedLine100Series<SalesData, String>(
                                    dataSource: chartData,
                                    dashArray: <double>[5,5],
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales
                                ),
                                StackedLine100Series<SalesData, String>(
                                    dataSource: chartData,
                                    dashArray: <double>[5,5],
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales2
                                ),
                                StackedLine100Series<SalesData, String>(
                                    dataSource: chartData,
                                    dashArray: <double>[5,5],
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales3
                                ),
                                StackedLine100Series<SalesData, String>(
                                    dataSource: chartData,
                                    dashArray: <double>[5,5],
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.sales4
                                )
                            ]
                        )
                    )
                )
            );
        }

    Dashed line chart

    HiLo chart

    HiLo Series illustrates the price movements in stock using the high and low values.

    To render a HiLo chart, create an instance of HiloSeries, and add it to the series collection property of SfCartesianChart. 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.
    • lowValueMapper - used to get the low values from the series.
    • highValueMapper - used to get the high values from the series.
  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: DateTimeAxis(),
                            series: <ChartSeries>[
                                // Renders bar chart
                                HiloSeries<SalesData, DateTime>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                      lowValueMapper: (Sample sales, _) => sales.low,
                  highValueMapper: (Sample sales, _) => sales.high
                                )
                            ]
                        )
                    )   
                )
            );
        }

    hiLo chart

    Open High Low Close (OHLC)

    OpenHighLowClose series is used to represent the low, high, open and closing values over time.

    To render a OpenHighLowClose chart, create an instance of hiloOpenCloseSeries, and add it to the series collection property of SfCartesianChart. 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.
    • showIndicationForSameValues- used to show indication of the data point with a thin line when its high and low values are same and also when all the values of high, low, open and close are same for the data point. By default is set to be false.
    • lowValueMapper - used to get the low values from the series.
    • highValueMapper - used to get the high values from the series.
    • openValueMapper - used to get the open values from the series.
    • closeValueMapper - used to get the close values from the series.
    • bearFillColor - bearFillColor will be applied when the opening value is less than the closing value.
    • bullFillColor - bullFillColor will be applied when the opening value is greater than closing value.
  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: DateTimeAxis(),
                            series: <ChartSeries>[
                                // Renders hiloOpenCloseSeries 
                                hiloOpenCloseSeries<SalesData, DateTime>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    lowValueMapper: (Sample sales, _) => sales.low,
                                    highValueMapper: (Sample sales, _) => sales.high, 
                                    openValueMapper: (Sample sales, _) => sales.open,
                                    closeValueMapper: (Sample sales, _) => sales.close,
    
                                )
                            ]
                        )
                    )   
                )
            );
        }

    hiLoopenclose chart

    Indication for same values

    In the OHLC series, there is a feature for the datapoints indication when their high and low values are same or open and close values or high, low, open and close values are same for a datapoint. For using this indication feature, showIndicationForSameValues property can be set to true.

    The following are the types of indication when the combination of high, low, open and close values are same for a datapoint.

    • In the OHLC chart, if the open and close values are same then a horizontal line will be drawn at that value by default.
    • If the high and low values are same and with showIndicationForSameValues property set to true then, a thin vertical line is drawn and if API is set to false, the line will not be drawn.
  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: SfCartesianChart(
                            series: <ChartSeries>[
                              HiloOpenCloseSeries<ChartData, double>(
                                showIndicationForSameValues: true,
                                dataSource: <ChartData>[
                                    ChartData( // Open and close values are same
                                        x: 5,
                                        open: 85.3593,
                                        high: 88.1435,
                                        low: 84.3914,
                                        close: 85.3593),
                                    ChartData( // High and low values are same
                                        x: 10,
                                        open: 86.4425,
                                        high: 86.4885,
                                        low: 86.4885,
                                        close: 86.5443),
                                    ChartData( //High, low, open, and close values all are same
                                        x: 15,
                                        open: 86.4885,
                                        high: 86.4885,
                                        low: 86.4885,
                                        close: 86.4885),
                                ],
                                xValueMapper: (ChartData data, _) => data.x,
                                highValueMapper: (ChartData data, _) => data.high,
                                lowValueMapper: (ChartData data, _) => data.low,
                                openValueMapper: (ChartData data, _) => data.open,
                                closeValueMapper: (ChartData data, _) => data.close)
                            ]
                        ),
                    )   
                )
            );
        }

    OHLC Indication

    Candle

    Candle series is similar to HiLo Open Close series, used to represent the low, high, open and closing price over time.

    To render a Candle chart, create an instance of CandleSeries, and add it to the series collection property of SfCartesianChart. 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.
    • showIndicationForSameValues- used to show indication of the data point with a thin line when its high and low values are same and also when all the values of high, low, open and close are same for the data point. By default is set to be false.
    • enableSolidCandles- used to enable/disable the solid candles. By default is set to be false. The fill color of the candle will be defined by its opening and closing values.
    • lowValueMapper - used to get the low values from the series.
    • highValueMapper - used to get the high values from the series.
    • openValueMapper - used to get the open values from the series.
    • closeValueMapper - used to get the close values from the series.
    • bearFillColor - bearFillColor will be applied when the opening value is less than the closing value.
    • bullFillColor - bullFillColor will be applied when the opening value is greater than closing value.
  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            primaryXAxis: DateTimeAxis(),
                            series: <ChartSeries>[
                                // Renders CandleSeries
                                CandleSeries<SalesData, DateTime>(
                                    dataSource: chartData,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    lowValueMapper: (Sample sales, _) => sales.low,
                                    highValueMapper: (Sample sales, _) => sales.high, 
                                    openValueMapper: (Sample sales, _) => sales.open,
                              closeValueMapper: (Sample sales, _) => sales.close,
    
                                )
                            ]
                        )
                    )   
                )
            );
        }

    candle chart

    See Also

    Indication for same values

    In the Candle series, there is a feature for the datapoints indication when their high and low values are same or open and close values or high, low, open and close values are same for a datapoint. For using this indication feature, showIndicationForSameValues property can be set to true.

    The following are the types of indication when the combination of high, low, open and close values are same for a datapoint.

    • In the Candle chart, if the open and close values are same then a horizontal line will be drawn at that value by default.
    • If the high and low values are same and with showIndicationForSameValues property set to true then, a thin vertical line is drawn and if API is set to false, the line will not be drawn.
  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: SfCartesianChart(
                            series: <ChartSeries>[
                              CandleSeries<ChartData, double>(
                                showIndicationForSameValues: true,
                                dataSource: <ChartData>[
                                    ChartData( // Open and close values are same
                                        x: 5,
                                        open: 86.3593,
                                        high: 88.1435,
                                        low: 84.3914,
                                        close: 86.3593),
                                    ChartData( // High and low values are same
                                        x: 10,
                                        open: 85.4425,
                                        high: 86.4885,
                                        low: 86.4885,
                                        close: 87.001),
                                    ChartData( //High, low, open, and close values all are same
                                        x: 15,
                                        open: 86.4885,
                                        high: 86.4885,
                                        low: 86.4885,
                                        close: 86.4885),
                                ],
                                xValueMapper: (ChartData data, _) => data.x,
                                highValueMapper: (ChartData data, _) => data.high,
                                lowValueMapper: (ChartData data, _) => data.low,
                                openValueMapper: (ChartData data, _) => data.open,
                                closeValueMapper: (ChartData data, _) => data.close)
                            ]
                        ),
                    )   
                );
            }

    Candle Indication

    Box and Whisker chart

    The Box and Whisker charts can be used to visualize a group of numerical data through their quartiles. It is also referred as box plot. Box plots may also have lines extending vertically from the boxes (whiskers) indicating variability outside the upper and lower quartiles.

    To render a Box and Whisker chart, create an instance of BoxAndWhiskerSeries, and add it to the series collection property of SfCartesianChart. The following properties to customize the appearance.

    • color - changes the color of the series.
    • opacity - controls the transparency of the chart series.
    • width - changes the stroke width of the series.
    • BoxPlotMode - used to change the box plot rendering mode. This property is applicable for
      normal, exclusive, and inclusive values.
    • showMean - indication for mean value in box plot. It is set to be true, a cross symbol will be displayed at the mean value, for each data point in box plot. Else, it will not be displayed.
    • spacing - spacing between the box plots.The value ranges from 0 to 1, where 1 represents 100% and 0 represents 0% of the available space.
  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries<SalesData, double>>[
                               BoxAndWhiskerSeries<SalesData, double>(
                                    dataSource: data,
                                    boxPlotMode: BoxPlotMode.exclusive,
                                    xValueMapper: (SalesData sales, _) => sales.year,
                                    yValueMapper: (SalesData sales, _) => sales.number
                                )
                            ]
                        )
                    )
                )   
            );
        }

    box and whisker chart

    Waterfall Chart

    The waterfall chart explains gradual changes in the quantitative value of an entity that is subject to changes by increments or decrements. Using the waterfall chart, you can quickly illustrate changes in revenues.

    To render a waterfall chart, create an instance of WaterfallSeries and add to theseriescollection property of SfCartesianChart. The following properties to customize the appearance.

    • negativePointsColor - changes the color of the negative data points in the series. If no color is specified, then the negative data points will be rendered with the series default color.
    • intermediateSumColor - changes the Color of the intermediate sum points in the series. If no color is specified, then the intermediate sum points will be rendered with the series default color.
    • totalSumColor - changes the color of the total sum points in the series. If no color is specified, then the total sum points will be rendered with the series default color.
    • connectorLineSettings - used to customize the waterfall chart connector line. Data points in waterfall chart are connected using the connector line. Provides the options to change the width, color and dashArray of the connector line to customize the appearance.
    • spacing - used to provide spacing between the data points in waterfall chart. The value ranges from 0 to 1, where 1 represents 100% and 0 represents 0% of the available space.
  • dart
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: Container(
                        child: SfCartesianChart(
                            series: <ChartSeries<SalesData, double>>[
                                WaterfallSeries<SalesData, double>(
                                    dataSource: <SalesData>[
                                        SalesData(2, 10, Colors.red),
                                        SalesData(3, -3, Colors.green),
                                        SalesData(4, 5, Colors.red, true),
                                        SalesData(5, 4, Colors.blue),
                                        SalesData(6, -2, Colors.red),
                                        SalesData(7, -5, Colors.red, true),
                                        SalesData(8, -10, Colors.red),
                                        SalesData(9, 8, Colors.red),
                                        SalesData(10, 8, Colors.red),
                                        SalesData(11, 5, Colors.red),
                                        SalesData(12, 8, Colors.red, false),
                                        SalesData(13, -5, Colors.red, false, true),
                                    ],
                                    negativePointsColor: const Color.fromRGBO(229, 101, 144, 1),
                                    intermediateSumColor: const Color.fromRGBO(79, 129, 188, 1),
                                    totalSumColor: const Color.fromRGBO(79, 129, 188, 1),
                                    xValueMapper: (SalesData sales, _) => sales.x,
                                    yValueMapper: (SalesData sales, _) => sales.y,
                                    intermediateSumPredicate: (SalesData sales, _) => sales.isIntermediate,
                                    totalSumPredicate: (SalesData sales, _) => sales.isTotal,
                                    connectorLineSettings: WaterfallConnectorLineSettings(
                                        width: 2.5
                                    )
                                )
                            ]
                        )
                    )
                )   
            );
        }

    waterfall_chart