HiLo Chart in Flutter Cartesian Charts (SfCartesianChart)

9 Jun 20213 minutes to read

To create a Flutter hilo chart quickly, you can check this video.

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