Box and Whisker Chart in Flutter Cartesian Charts (SfCartesianChart)
21 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
, andinclusive
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.
@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
)
]
)
)
)
);
}
Was this page helpful?
Yes
No
Thank you for your feedback!
Thank you for your feedback and comments. We will rectify this as soon as possible!
An unknown error has occurred. Please try again.
Help us improve this page