Box and Whisker Chart in Flutter Cartesian Charts (SfCartesianChart)

24 May 2021 / 3 minutes to read

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