acme_chart 1.0.5

A financial charting library for Flutter applications, offering a comprehensive suite of features for technical analysis and trading visualization.

Acme Chart

A financial charting library for Flutter — candlestick & line charts, 50+ technical indicators, interactive drawing tools, and customizable themes. Built for trading platforms and market data visualization.

Different Chart Types	Annotations & Crosshair

Technical Indicators	Interactive Tools

---

📦 Installation

Add to your pubspec.yaml:

dependencies:
  acme_chart: ^1.0.0

Requires Dart SDK >=3.12.0 <4.0.0 and Flutter ^3.44.0.

---

🚀 Quick Start

import 'package:acme_chart/acme_chart.dart';

final candles = [
  Candle(epoch: DateTime(...), open: 200, high: 400, low: 50, close: 100),
  Candle(epoch: DateTime(...), open: 100, high: 500, low: 100, close: 500),
];

Chart(
  mainSeries: CandleSeries(candles),
  pipSize: 3,       // decimal places on the y-axis
  granularity: 60,  // candle period in seconds
)

---

📊 Chart Types

Pass a different Series to mainSeries to switch chart types:

// Candlestick
Chart(mainSeries: CandleSeries(candles), pipSize: 3)

// Line
Chart(mainSeries: LineSeries(candles), pipSize: 3)

🖌️ Styling Series

Chart(
  mainSeries: CandleSeries(
    candles,
    style: CandleStyle(
      positiveColor: Colors.green,
      negativeColor: Colors.red,
    ),
  ),
)

---

📐 Annotations

Add horizontal or vertical barriers via the annotations parameter:

Chart(
  mainSeries: LineSeries(candles),
  pipSize: 3,
  annotations: [
    HorizontalBarrier(98161.950),
    VerticalBarrier(candles.last.epoch, title: 'V Barrier'),
  ],
)

🖌️ Styling Annotations

HorizontalBarrier(
  98161.950,
  style: HorizontalBarrierStyle(
    color: const Color(0xFF00A79E),
    isDashed: false,
  ),
  visibility: HorizontalBarrierVisibility.forceToStayOnRange,
)

Custom annotations are supported — subclass ChartAnnotation to render anything you need.

🔴 TickIndicator

A built-in annotation that highlights the most recent tick:

Chart(
  mainSeries: LineSeries(candles),
  pipSize: 3,
  annotations: [TickIndicator(candles.last)],
)

---

📈 Technical Indicators

Use overlayConfigs for indicators that share the main y-axis (e.g. Bollinger Bands) and bottomConfigs for indicators with their own scale (e.g. RSI, MACD):

Chart(
  mainSeries: CandleSeries(candles),
  overlayConfigs: [
    BollingerBandsIndicatorConfig(
      period: 20,
      standardDeviation: 2,
      movingAverageType: MovingAverageType.exponential,
      upperLineStyle: LineStyle(color: Colors.purple),
      middleLineStyle: LineStyle(color: Colors.black),
      lowerLineStyle: LineStyle(color: Colors.blue),
    ),
  ],
  bottomConfigs: [
    RSIIndicatorConfig(
      period: 14,
      lineStyle: LineStyle(color: Colors.green, thickness: 1),
      oscillatorLinesConfig: OscillatorLinesConfig(
        overboughtValue: 70,
        oversoldValue: 30,
        overboughtStyle: LineStyle(color: Colors.red),
        oversoldStyle: LineStyle(color: Colors.green),
      ),
      showZones: true,
    ),
    SMIIndicatorConfig(
      period: 14,
      signalPeriod: 9,
      lineStyle: LineStyle(color: Colors.blue, thickness: 2),
      signalLineStyle: LineStyle(color: Colors.red),
    ),
  ],
  pipSize: 3,
  granularity: 60,
)

Independent Axis Scaling for Overlay Series

By default, every overlay series (anything sharing the main chart with the candles) is scaled against the shared price axis. When an overlay indicator's values live on a different scale than price (e.g. a MACD-derived signal layered on top of the candles), that shared scaling can compress it into an unreadable line or distort the price axis.

Series (and its subclasses, e.g. SingleIndicatorSeries) exposes an axisGroup constructor parameter to opt out of the shared scale:

• null (the default) — shares the main price axis, same as before.
• Any non-null String — the series is scaled on its own value range instead, while still painting layered over the candles. Series that share the same axisGroup value are combined into one scale together; series with different axisGroup values are scaled and painted separately, so unrelated indicators with very different ranges (e.g. a 0–10-bounded oscillator and a MACD-scale signal) don't distort each other.

SingleIndicatorSeries(
  input: macdIndicator,
  options: MACDIndicatorOptions(),
  axisGroup: 'macd',
)

axisGroup is not yet available on the overlayConfigs/IndicatorConfig shortcut above — use it when constructing Series directly (e.g. as overlaySeries on the lower-level MainChart widget). It has no effect on bottomConfigs indicators, which already render on their own independent axis.

Available Indicators

📉 Moving Averages

All moving average types share a single MAIndicatorConfig, selected via its movingAverageType parameter:

Moving Average Type	MovingAverageType value
Simple	simple
Exponential	exponential
Double Exponential	doubleExponential
Triple Exponential	tripleExponential
Triangular	triangular
Weighted	weighted
Hull	hull
Variable	variable
Welles Wilder Smoothing	wellesWilder
Zero-Lag Exponential	zeroLag
Time Series	timeSeries

〰️ Oscillators

Indicator	Config Class
Relative Strength Index	RSIIndicatorConfig
Fast / Slow Stochastic Oscillator	StochasticOscillatorIndicatorConfig
Stochastic Momentum Index	SMIIndicatorConfig
MACD Line / Signal / Histogram	MACDIndicatorConfig
Awesome Oscillator	AwesomeOscillatorIndicatorConfig
Williams %R	WilliamsRIndicatorConfig
Rate of Change	ROCIndicatorConfig
Gator Oscillator	GatorIndicatorConfig

📡 Trend Indicators

Indicator	Config Class
Average Directional Index	ADXIndicatorConfig
Parabolic SAR	ParabolicSARConfig
Ichimoku Cloud	IchimokuCloudIndicatorConfig

💥 Volatility Indicators

Indicator	Config Class
Bollinger Bands	BollingerBandsIndicatorConfig

📏 Channel Indicators

Indicator	Config Class
Donchian Channel	DonchianChannelIndicatorConfig
Moving Average Envelope	MAEnvIndicatorConfig

🔀 Other Indicators

Indicator	Config Class
Aroon Up / Down / Oscillator	AroonIndicatorConfig
Commodity Channel Index	CCIIndicatorConfig
Detrended Price Oscillator	DPOIndicatorConfig
ZigZag	ZigZagIndicatorConfig
Fixed Channel Bands	FractalChaosBandIndicatorConfig

---

✏️ Drawing Tools

Interactive drawing tools (trend lines, channels, Fibonacci retracements, and more) are supported. See the Drawing Tools documentation for the full list and configuration options.

---

📍 Markers

Supply markerSeries to show trade entry/exit markers:

Chart(
  mainSeries: CandleSeries(candles),
  markerSeries: MarkerSeries([
    Marker.up(epoch: 123, quote: 10, onTap: () {}),
    Marker.down(epoch: 124, quote: 12, onTap: () {}),
  ]),
)

For an active (expanded) marker:

MarkerSeries(
  [...],
  activeMarker: ActiveMarker(
    epoch: 123,
    quote: 10,
    onTap: () {},
    onOutsideTap: () { /* dismiss */ },
  ),
)

For entry/exit tick markers:

MarkerSeries(
  [...],
  entryTick: Tick(epoch: ..., quote: ...),
  exitTick: Tick(epoch: ..., quote: ...),
)

---

🔔 Callbacks

Visible Area Changes

Chart(
  mainSeries: LineSeries(candles),
  pipSize: 4,
  onVisibleAreaChanged: (int leftEpoch, int rightEpoch) {
    // load more data when scrolled to the left edge
  },
)

Crosshair

Chart(
  mainSeries: LineSeries(candles),
  pipSize: 4,
  onCrosshairAppeared: () => Vibration.vibrate(duration: 50),
)

---

🎨 Theme

The chart automatically switches between its built-in dark and light themes based on Theme.of(context).brightness. To customise, extend ChartDefaultDarkTheme or ChartDefaultLightTheme and override only what you need:

class CustomTheme extends ChartDefaultDarkTheme {
  @override
  GridStyle get gridStyle => GridStyle(
    gridLineColor: Colors.yellow,
    xLabelStyle: textStyle(
      textStyle: caption2,
      color: Colors.yellow,
      fontSize: 13,
    ),
  );
}

Chart(
  mainSeries: CandleSeries(candles),
  theme: CustomTheme(),
)

See ChartTheme for all overridable properties.

---

🌍 Localization

Add ChartLocalization.delegate to your MaterialApp:

MaterialApp(
  localizationsDelegates: [
    ChartLocalization.delegate,
    // ...
  ],
)

To change the chart locale at runtime:

ChartLocalization.load(locale);

---

🔋 AcmeChart

AcmeChart is a batteries-included wrapper around Chart that adds a built-in UI for adding, removing, and configuring indicators and drawing tools, with automatic persistence via shared_preferences.

AcmeChart(
  mainSeries: CandleSeries(candles),
  granularity: 60,
  activeSymbol: 'default',
  pipSize: 4,
)

All Chart parameters are available on AcmeChart except overlayConfigs and bottomConfigs, which are managed internally. See the AcmeChart documentation for full details.

---

🔬 Custom Indicator Math

FunctionIndicator lets you compute an indicator series with your own bulk math function instead of the built-in acme_indicators calculation — useful for swapping in a faster or native implementation for a specific line:

final customRsi = FunctionIndicator<MyResult>(
  someSourceIndicator,
  (bars, values) => myFastRsiCompute(values),
);

When several lines of the same indicator share one multi-output computation (e.g. Bollinger Bands' upper/middle/lower, or MACD's line/signal/histogram), wrap the computation in MemoizedResult — create one instance per indicator group and capture it in each line's FunctionIndicator closure, so the computation runs once and every line reads from the cached result:

final bollinger = MemoizedResult<({List<double> upper, List<double> middle, List<double> lower})>(
  (bars, values) => myBollingerCompute(values),
);

final upper = FunctionIndicator<MyResult>(source, (bars, values) => bollinger(bars, values).upper);
final middle = FunctionIndicator<MyResult>(source, (bars, values) => bollinger(bars, values).middle);
final lower = FunctionIndicator<MyResult>(source, (bars, values) => bollinger(bars, values).lower);

---

🎮 ChartController

Programmatically control scroll and zoom:

final controller = ChartController();

Chart(
  mainSeries: CandleSeries(candles),
  controller: controller,
)

controller.scrollToLastTick();
controller.scale(100);

---

🙏 Acknowledgements

This package is forked from deriv_chart. Many thanks to the Deriv team for their foundational work.

---

📚 Additional Documentation

• DeepWiki
• How Chart Library Works
• Drawing Tools
• AcmeChart Widget Usage
• Contributing