DEV Community

Cover image for I Built a High-Performance Trading Chart Engine in Flutter (and Open-Sourced It)
Rahul Prajapati
Rahul Prajapati

Posted on

I Built a High-Performance Trading Chart Engine in Flutter (and Open-Sourced It)

#flutter #opensource #performance #dart

For the last two weeks, I went down a deep rabbit hole.

Not tutorials.
Not UI polish.
But how trading charts actually work under the hood.

The result of that continuous curiosity, experimentation, and learning is my open‑source Flutter package:
👉 imp_trading_chart — a high‑performance trading chart engine for Flutter
📦 Available on pub.dev

This post is about why I built it, how it works internally, and how you can contribute.

🤔 The Problem with Most Flutter Chart Libraries

Most chart libraries in Flutter are built like this:

  • One widget per candle
  • Deep widget trees
  • Rebuilds on every data update
  • DateTime calculations inside the render loop

This approach works… until it doesn’t.

Once you try:

  • 5k–10k+ candles
  • Real‑time price updates
  • Smooth pan & pinch‑to‑zoom

You start seeing:

  • Jank
  • Dropped frames
  • Laggy gestures

That’s when I asked myself:

What if charts were built like engines instead of widgets?

🧠 The Idea: Engine‑First Charts

I stopped thinking in widgets and started thinking in pixels.

So I designed imp_trading_chart using a strict engine‑first architecture:

Candle Data (List<Candle>)
        ↓
ChartEngine (viewport, scaling, mapping)
        ↓
CustomPainter (draw only visible pixels)
Enter fullscreen mode Exit fullscreen mode

Core principles

  • ❌ No widget‑per‑candle
  • ❌ No DateTime math in painters
  • ❌ No unnecessary rebuilds
  • ✅ Only visible data is processed
  • ✅ Pan & zoom are O(1) operations
  • ✅ Built for real‑time feeds

This design makes the chart fast, predictable, and scalable.

⚡ What imp_trading_chart Can Do

  • 📈 Candlestick & line charts
  • 🖐 Smooth pan & pinch‑to‑zoom
  • 🎯 Crosshair with price & time tracking
  • 🔄 Live tick updates
  • 🎨 Fully customizable styles & layouts
  • 🚀 Smooth with 10k+ candles

Under the hood:

  • CustomPainter‑based rendering
  • Viewport‑driven drawing
  • Cached price scaling
  • Immutable engine design

📊 Chart Variants Included

The package ships with multiple chart presets, all powered by the same engine:

  • Trading – full‑featured professional chart
  • Simple – clean chart with labels
  • Compact – dashboards & lists
  • Minimal – sparklines & previews

Different UI. Same core engine.

🚀 Quick Example 

ImpChart.trading(
  candles: candles,
  currentPrice: candles.last.close,
  showCrosshair: true,
  defaultVisibleCount: 200,
);
Enter fullscreen mode Exit fullscreen mode

No controllers required.
No heavy setup.

📦 Try It Yourself 

flutter pub add imp_trading_chart
Enter fullscreen mode Exit fullscreen mode

🧩 Why Open Source?

Because chart engines are infrastructure, not just UI widgets.

I want this package to grow with the community — not behind closed doors.

If you:

  • Love performance work
  • Enjoy graphics, math, or engine design
  • Build trading, crypto, or fintech apps
  • Want to learn how chart engines really work

👉 You’re very welcome to contribute.

Even small contributions matter:

  • Documentation improvements
  • Refactors
  • Feature ideas
  • Bug reports

🛣 Roadmap

Planned next:

  • Public ChartController
  • Programmatic pan / zoom API
  • Indicator overlays (MA, EMA, VWAP)
  • More advanced examples

🙌 Final Thoughts

This is not just my first package.

It’s the result of two weeks of continuous brainstorming, learning, and curiosity — and I’m genuinely excited to see where the community takes it.

If this project sounds interesting:

  • ⭐ Star the repo
  • 🧪 Try the package
  • 🧠 Open an issue
  • 🔧 Send a PR

Let’s build something solid together 🚀

— Rahul Prajapati

Top comments (0)