ohlcv_chart 2.5.0
ohlcv_chart: ^2.5.0 copied to clipboard
The most complete candlestick chart for Flutter, plus depth, line, bar, scatter, pie, radar and heatmap charts: 31 indicators, 29 drawing tools, pure CustomPainter.
ohlcv_chart — the most complete candlestick chart for Flutter, with every drawing tool and indicator #
Read the changelog and the docs. This package moves quickly — a release can carry several new indicators, a new widget or two, and behaviour that has been sharpened since the last one. The list below is a summary and goes stale between releases;
CHANGELOG.mdsays what actually changed and why, anddoc/has a page per feature with the detail. Both are worth a minute before you upgrade, and before you conclude something is missing.
Support #
The full package is free to use in your own projects — every chart type, all 31 indicators and all 29 drawing tools, nothing held back, nothing paywalled, commercial projects included. I keep it updated weekly: new indicators, drawing tools and fixes land as I use it myself.
If it saves you some work, all I ask in return is:
- ⭐ a star on the repository
- 👍 a like on the package on pub.dev
- 👤 a follow on GitHub
That is the whole price, and it is what keeps the weekly updates coming.
A candlestick (K-line) chart, a market-depth chart, and line, bar, scatter,
pie, radar and heatmap charts for Flutter, drawn entirely with CustomPainter
— no WebView, no JavaScript bridge. One package for the trading screen and for the balance,
growth and report charts around it.
Named for the open-high-low-close-volume bars it renders.

Features #
- Series charts for everything else —
SeriesChartdraws plain values rather than candles: lines with four curves, areas that fade to a baseline and split colour where they cross it, bars that group, stack or float, scatter plots, error bars, a band between two lines, axes you write, name or hide, a chart you can turn on its side, a tooltip of your own, one crosshair shared across charts, a range strip for long data and animated data changes. The migration guide mapsfl_chartandcandlesticksonto it. - A pie chart and a radar chart —
PieChartfor a pie, a doughnut with a widget in its hole or a ring gauge, with exploded slices and badges;RadarChartfor a web of features with one outline per series. The two shapes an axis cannot draw, in the same package as the rest. - A heatmap —
HeatmapChartcolours a grid of squares by their value, from a matrix or from sparse cells: a fading or a stepped colour scale, labels in the squares and down both sides, a legend, and a readout for the square under the pointer. A contribution graph, a correlation matrix or sales by weekday and hour. - Eight chart types — candles, OHLC bars, a line, a step line, a filled area, an HLC area, a baseline chart and columns — plus Heikin-Ashi, Renko, three-line break, Kagi, point & figure and range bars as transforms of the candles themselves.
- 31 indicators, each a configured instance rather than a flag — so
ATR(8),ATR(14)andATR(20)are three panes, with their own settings and colours. - Main-chart overlays —
MA,EMA,BOLL,SAR,VWAPin three flavours — whole-series, anchored to a candle, or restarted each session with standard-deviation bands — Supertrend, Keltner and Donchian channels, the Ichimoku Cloud, pivot points and a volume profile. - Swing readers — a zigzag through the swing highs and lows, Fibonacci retracement of the last swing, and Elliott wave labels, all sized to the market by default.
- Sub-charts —
MACD,KDJ,RSI,WR,CCI,ATR,OBV,MFI,DMI, Aroon, Stochastic RSI,ROC,TRIX, a volume average and the Awesome oscillator, each in its own stacked pane — resizable and reorderable by dragging. - Linear, logarithmic, percentage or indexed-to-100 price axis, so a decade of compounding reads as well as an afternoon — invertible, with the window's high, low and average close markable on it.
- A price scale you can drag — pull the labels to stretch or flatten the candles, drag the chart to slide the window, double-tap to fit it back; from code as well, through the controller.
- A price axis that can be pinned —
lockPriceScaleholds it at one range instead of refitting it to whatever is on screen, so scrolling moves the candles under a scale that stays put rather than rescaling every number on the axis; andpriceAxisWidthholds a gutter back for the labels, so the candles stop short of them instead of sliding underneath. - Axes that read as round numbers — both axes choose their values first and are ruled where the labels fall, so a price scale steps
69000, 69500, 70000and an intraday date axis lands on the hour, never on whatever value happened to fall on an evenly spaced pixel. - 29 drawing tools — levels and rays, trend lines, arrows, extended lines, boxes, ellipses, triangles, parallel channels, pitchforks, Gann fans and boxes, four Fibonacci tools, a regression trend with its bands, XABCD patterns, multi-leg paths, price and date brackets, a measuring tool, planned positions with their risk-to-reward, notes, callouts, flags and freehand strokes; each placed by tap or drag, then dragged, locked, hidden and removed.
- A line editor that opens on selection: colour, opacity, thickness, solid/dashed/dotted stroke, fill, label text and visibility, alerts, lock and delete — every option list, control and pixel of it configurable through
DrawingStyle. - Undo and redo, through a
ChartDrawingControllerthat owns the drawings and their history, with ⌘Z, ⇧⌘Z and Delete on the chart itself. - Select several and edit them together — shift- or ⌘-click, or ⌘A; then drag, restyle or delete the lot in one step, with ⌘C/⌘V/⌘D to copy and ⌘]/⌘[ to restack.
- Exact coordinates — a dialog over any drawing's anchors, each price and candle typed in rather than placed by eye.
- Style templates — save one drawing's look and put it on the rest.
- Indicator templates — a named set of indicators saved and put on any chart in one gesture, with four starter sets to begin from.
- A layout that persists — every drawing serialises, so
jsonEncode(drawings.toJson())andChartDrawings.fromJsonare the whole story. - A drawing manager — a ready-made panel listing what is drawn, with show/hide, lock, delete, undo, redo and clear.
- Price alerts on a level, a trend line, either side of a channel or every step of a retracement, reported when the market crosses one.
- Indicator alerts — an RSI over 70, a histogram turning positive — and panes that can be logarithmic or read as a percentage, with any indicator computable over another's output.
- Higher timeframes — a daily moving average on a fifteen-minute chart, through
TimeframeIndicator; each candle reads the last higher-timeframe bar that had closed when it opened, so the line never repaints and never shows a value from its own future. - A right-click menu on the chart and on any drawing — coordinates, duplicate, restack, lock, hide, alert, delete; paste, select all, fit the scale, undo — with your own items added through one builder.
- Crosshair on hover and an OHLC legend above the chart, which is how a chart reads on a desktop.
- Or no interaction at all —
scrollEnabledandzoomEnabledturn the chart's own gestures off, for an intraday session, a thumbnail or a figure that is meant to sit still rather than be navigated; your own code can still drive it. - Driven from your own code —
KChartControllerzooms, scrolls back to the live candle and hands you the chart as a PNG. - The visible window, read and set — which candles are on screen, go-to-date, fit-to-screen, and a callback whenever it moves.
- An overview strip —
ChartOverviewdraws the whole history under the chart with the visible window lit; drag it to scrub, drag its edges to zoom, tap to jump. - Charts kept in step —
ChartLinkholds any number of charts on the same window and crosshair, so scrolling, zooming or pointing at one carries the rest with it;ChartLink.all()carries the crosshair's price and the price axis too, for one market shown twice. - Compare a second instrument — overlay any number of other series, rebased so relative performance reads off the same axis, matched to your candles by time.
- Bar replay — rewind to any candle and step or play the market forward, with the indicators only knowing what has arrived.
- Buy/sell signal markers pinned to candles.
- Event marks — earnings, dividends, splits and news badged under the candle they happened on, and tappable.
- Orders and positions — live lines from your venue, tagged with side, size and P&L, and draggable to amend.
- Extended-hours shading — the pre-market and after-hours stretches washed behind the candles — and a per-bar colour of your own.
- Depth chart — a separate
DepthChartwidget for the order book, drawn as the cumulative curve, a per-rung histogram, both at once, or a numeric ladder of price, size and running total, on a linear, log or percentage axis and zoomable to the levels around the mid, with an optional bid/ask ratio bar underneath showing which way the resting orders lean. - Info dialog on long press, either the built-in Material popup or your own builder.
- "Now price" line with a live countdown to the close of the current candle.
- Session dividers and a display time zone, so an intraday chart breaks where the trader's day does.
- A watermark of your own — any widget, such as an
Image.assetof your logo, painted faintly in one colour over the candle area. - Fully themeable —
ChartStylefor geometry,ChartColorsfor every colour,DrawingStylefor the drawing tools;ChartTranslationsfor every label. Filled or hollow candles, dashed or solid crosshair, pane separators, axis-label pills and a placed, tinted watermark. - Fits its box — the candles take whatever height the volume and indicator panes leave, so the chart works from a phone to a desktop window without arithmetic on your side.
The whole package in pictures #
Every widget, every chart type and every tool below is in this one package, and each picture links to the page that covers it.
Series, pie, radar and heatmap charts #
![]() Four business charts A return split at zero, profit bars, flows with a tooltip and a sparkline. |
![]() Pie and radar A doughnut with its total in the hole, and a web scoring two strategies. |
![]() Heatmap Six months of activity, and orders by hour and weekday, by value. |
![]() Scatter A dot per trade, shaped and coloured by the point, read out one at a time. |
![]() Stacked and turned Bars piled on each other on a chart running rightwards, both axes named. |
![]() Floating bars and bands A waterfall, and a forecast inside its band with error bars. |
![]() A window over long data Three series over five months, with the strip that moves the window. |
![]() One crosshair, two panels A balance panel over a profit panel, marking the same day in both. |
![]() Depth chart Cumulative bid and ask depth from the order book. |
![]() Depth, four ways The curve, the per-rung bars, both at once, or a numeric ladder. |
![]() The bid/ask ratio bar Which way the resting orders lean, under the depth chart. |
Candles, and the ways to draw them #
![]() Eight chart types Bars, baseline, area, step line, HLC area and columns. |
![]() Four bar transforms Line break, Kagi, point & figure and range bars. |
![]() Heikin-Ashi and Renko The same market re-aggregated before it is drawn. |
![]() A second instrument Another series over the same window, rebased or at its own prices. |
![]() Dark and light The same chart under both palettes, every colour yours. |
31 indicators #
![]() Main-chart overlays The Ichimoku cloud and Supertrend, over Stochastic RSI and Awesome. |
![]() Profile and anchored VWAP A volume profile and a VWAP anchored to a candle. |
![]() Swing readers A zigzag, a Fibonacci retracement and Elliott wave labels. |
![]() Stacked panes Three ATRs at different periods, each in its own resizable pane. |
![]() Higher timeframes A four-hour average and RSI over fifteen-minute candles. |
![]() Built from the catalogue The example app's add-indicator sheet, generated from it. |
Drawing tools, orders and events #
![]() 29 drawing tools Trend and horizontal lines with labels, snapped and persisted. |
![]() Rays, boxes and fibs A ray, an arrow, a horizontal ray, a range box and a retracement. |
![]() The line editor Every control of a selected drawing, styled by DrawingStyle. |
![]() Orders and positions A working order and an open position, each tagged on the axis. |
![]() Planning a trade A planned position with its risk-to-reward, inside a channel. |
![]() Event marks Earnings, a dividend, a split and news under the candles. |
Reading it, and driving it #
![]() Legend and crosshair The OHLC row above the chart, reading from the crosshair. |
![]() The long-press readout The card over a held candle, or a builder of your own. |
![]() The overview strip The whole series under the chart, with the visible window lit. |
![]() Linked charts Two charts sharing one crosshair. |
![]() Bar replay Rewind, then step or play the market forward. |
![]() Held mid-replay The chart stopped at the 150th candle of 420, under a transport bar. |
The axes, the session and the box #
![]() Four price axes Linear, log, percentage or indexed to 100 — and invertible. |
![]() A log axis Stepping by ratio, so a decade of compounding reads evenly. |
![]() The date axis The round time values the chart picks, or your own formatter. |
![]() Sessions and time zones Pre-market and after-hours washed behind the candles. |
![]() Session VWAP A VWAP restarted each session, with its standard-deviation band. |
![]() Fits its box The candle area filling the box, and pinned to a height. |
![]() A watermark of your own Any widget, painted faintly over the candle area. |
Install #
dependencies:
ohlcv_chart: ^2.5.0
Quick start #
Feed a KChartWidget a List<KLineEntity>, having run DataUtil.calculate
over it so the indicator fields are populated:
import 'package:ohlcv_chart/ohlcv_chart.dart';
DataUtil.calculate(candles);
KChartWidget(
candles,
ChartColors(),
timeFrame: const Duration(minutes: 15),
indicators: [MaIndicator(period: 20), MacdIndicator()],
fixedLength: 2,
);
That is a working chart. The candlestick chart page covers the rest of the constructor, and the example app is a tour of every switch in the package.
Documentation #
One page per feature, in doc/:
| Candlestick chart | The candles, and the shape KLineEntity expects |
| Series charts | SeriesChart for values: lines, areas, bars, scatter, touch, a range strip, animation |
| Pie chart | PieChart: sections, a doughnut hole, badges, touch |
| Radar chart | RadarChart: a web of features with an outline per series |
| Heatmap | HeatmapChart: a grid coloured by value, with a scale and a legend |
| Indicators | 31 of them as instances, the catalogue, pane scales, chaining, higher timeframes, alerts |
| Comparing a second instrument | Other series over the same window, rebased or at their own prices |
| Chart types | Eight ways to draw a series, and six transforms of the candles |
| Price axis | Linear, log, percentage or indexed to 100; inverting, dragging, locking it, and its gutter |
| The date axis | Round time values, and taking the axis over yourself |
| The legend and the crosshair | The OHLC row, and the crosshair on hover |
| The long-press readout | The card over a held candle, and your own builder |
| Drawing tools | All 29 tools, persistence, undo, multi-select, templates, alerts |
| Customising the line editor | Every control of the editor, through DrawingStyle |
| Orders and positions | Live lines from your venue, tagged and draggable |
| Event marks | Earnings, dividends, splits and news under the candles |
| Sessions and time zones | Day dividers, display time zone, extended hours, per-bar colour |
| Driving the chart | KChartController, the visible window, and a chart with no gestures |
| Panes | Stacking, resizing and reordering the indicator panes |
| Bar replay | Rewind, then step or play the market forward |
| Sizing | How the candle area and the panes divide the height |
| Depth chart | The order-book widget: four modes, three axes |
| Theming | ChartStyle, ChartColors and ChartTranslations |
| Migrating from 1.x | What changed, and what to use instead |
| Migrating from fl_chart and candlesticks | Their APIs mapped onto this package's, with worked examples |
Notes #
- Needs Dart 3.6 and Flutter 3.27 or later.
- The zoom slider renders only where there is no pinch gesture — web and desktop.
watermarktakes any widget and paints it inChartColors.watermarkColor, so a full-colour logo reads as a silhouette; the package no longer depends onflutter_svg— passSvgPicture.asset(...)from it yourself for an SVG.
Credits #
The rendering core began as a derivative of the open-source k_chart package and
has since been substantially extended with drawing tools, signals, multi-indicator
stacking and a reworked painter pipeline.
License #
MIT — see LICENSE.









































