acme_chart 1.0.2

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,
)

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