Financial Chart Types

Financial charts — Candle, HILO, and OHLC — are used to visualize stock price data. They all require Open, High, Low, and Close values per data point.

Financial Data Model

All financial series use a data model with at least these fields:

class StockData {
  StockData(this.date, this.open, this.high, this.low, this.close);
  final DateTime date;
  final double open;
  final double high;
  final double low;
  final double close;
}

Candle Chart

Renders Japanese candlestick patterns. Each candle shows the open/close as a body and the high/low as wicks (shadows).

SfCartesianChart(
  primaryXAxis: DateTimeAxis(),
  series: <CartesianSeries>[
    CandleSeries<StockData, DateTime>(
      dataSource: stockData,
      xValueMapper: (StockData d, _) => d.date,
      openValueMapper: (StockData d, _) => d.open,
      highValueMapper: (StockData d, _) => d.high,
      lowValueMapper: (StockData d, _) => d.low,
      closeValueMapper: (StockData d, _) => d.close,
      bullColor: Colors.green,    
      bearColor: Colors.red,      
      enableSolidCandles: false,
    ),
  ],
)

Key properties:

bullColor — color when close price is above open (bullish candle)
bearColor — color when close price is below open (bearish candle)
enableSolidCandles — true fills the candle body; false renders hollow candles

HILO Chart

Shows only the high and low prices as vertical lines (no open/close body). Simpler than candle — good for quick price range visualization.

HiloSeries<StockData, DateTime>(
  dataSource: stockData,
  xValueMapper: (StockData d, _) => d.date,
  highValueMapper: (StockData d, _) => d.high,
  lowValueMapper: (StockData d, _) => d.low,
  width: 0.5,
  color: Colors.blue,
)

HiloSeries only needs highValueMapper and lowValueMapper — no open/close.

OHLC Chart

Open-High-Low-Close chart rendered as vertical lines with small horizontal ticks for open (left tick) and close (right tick). A standard alternative to candlestick.

HiloOpenCloseSeries<StockData, DateTime>(
  dataSource: stockData,
  xValueMapper: (StockData d, _) => d.date,
  openValueMapper: (StockData d, _) => d.open,
  highValueMapper: (StockData d, _) => d.high,
  lowValueMapper: (StockData d, _) => d.low,
  closeValueMapper: (StockData d, _) => d.close,
  bullColor: Colors.green,
  bearColor: Colors.red,
)

Combining Financial Charts with Technical Indicators

Financial series are often combined with technical indicators:

SfCartesianChart(
  primaryXAxis: DateTimeAxis(),
  series: <CartesianSeries>[
    CandleSeries<StockData, DateTime>(
      dataSource: stockData,
      xValueMapper: (d, _) => d.date,
      openValueMapper: (d, _) => d.open,
      highValueMapper: (d, _) => d.high,
      lowValueMapper: (d, _) => d.low,
      closeValueMapper: (d, _) => d.close,
      name: 'AAPL',
    ),
  ],
  indicators: <TechnicalIndicator>[
    SmaIndicator<StockData, DateTime>(
      seriesName: 'AAPL',
      period: 14,
      signalLineColor: Colors.orange,
    ),
  ],
)

Choosing Between Financial Chart Types

Scenario	Use
Full OHLC analysis with body	`CandleSeries`
Simple price range only (no open/close)	`HiloSeries`
OHLC with tick-mark style (no colored body)	`HiloOpenCloseSeries`
Combined with technical indicators	Any — pair with `indicators` property

3.4 KiB Raw Permalink Blame History