Cristalyse: A Flutter Data Visualization Library

Rudi Gilbert

Completed work

Data Analyst

Flutter Developer

Technical Writer

Dart

Computer Software

Built Cristalyse—a Data Visualization Library for Flutter

If you've ever tried to build decent data visualizations in Flutter, you know the pain. You either get stuck with basic chart widgets that look like they're from 2010, or you end up embedding web views just to use D3.js. Neither feels great.

As someone who has a CS degree focused on data analytics, I spent way too much time fighting with fl_chart and charts_flutter. They're fine for simple stuff, but the moment you need anything remotely sophisticated, you're out of luck.

Don't get me wrong—those libraries serve their purpose. But when you need dual y-axes, custom interactions, or anything beyond basic bar/line charts, you're basically SOL.

So I built Cristalyse.

What's different about it?

It's based on grammar of graphics (think ggplot2 if you've used R). Instead of rigid chart widgets, you build visualizations by layering data, mappings, and geometries.

Here's what a scatter plot looks like:

CristalyseChart()
  .data([
    {'x': 1, 'y': 2, 'category': 'A'},
    {'x': 2, 'y': 4, 'category': 'B'},
    {'x': 3, 'y': 1, 'category': 'A'},
  ])
  .mapping(x: 'x', y: 'y', color: 'category')
  .geomPoint(size: 5.0, alpha: 0.7)
  .scaleXContinuous()
  .scaleYContinuous()
  .theme(ChartTheme.defaultTheme())
  .build()

Compare that to the usual Flutter chart setup where you're passing in a dozen different widget properties and hoping for the best.

Actually useful features

The stuff I was missing in other libraries:

Dual Y-axis support - Because sometimes you need to plot revenue and user count on the same chart without everything looking broken. Most Flutter chart libraries either don't support this or make it incredibly painful.

Proper animations - 60fps smooth transitions that leverage Flutter's rendering engine. Not the janky CSS-style animations you get with web-based solutions.

Real theming - Change colors, fonts, spacing, grid styles, whatever. No more "this chart library only supports 5 preset themes" nonsense.

SVG export - For when your PM asks for "just a quick chart for the presentation" (we've all been there). Works across all platforms.

Interactive tooltips - Hover states that actually work and look professional. Pan and zoom that feels natural.

Multiple geometries - Layer different chart types on the same plot. Scatter plots with trend lines, bar charts with reference lines, whatever makes sense for your data.

Real world example

Here's something I built recently - a dashboard showing user engagement over time with conversion events overlaid:

CristalyseChart()
  .data(analyticsData)
  .mapping(x: 'date', y: 'activeUsers')
  .mappingY2('conversions')
  .geomLine(
    yAxis: YAxis.primary,
    strokeWidth: 2.0,
    color: Colors.blue,
  )
  .geomPoint(
    yAxis: YAxis.secondary,
    color: Colors.red,
    size: 8.0,
  )
  .scaleXContinuous()
  .scaleYContinuous(min: 0)
  .scaleY2Continuous(min: 0)
  .theme(ChartTheme.defaultTheme())
  .build()

Try doing that cleanly with fl_chart. I'll wait.

Performance that doesn't suck

I benchmarked this against the popular Flutter chart libraries with a dataset of 10k points. Cristalyse consistently outperformed them, especially on animations and interactions. The secret sauce is leveraging Flutter's CustomPainter directly instead of building complex widget trees.

Plus, since it's not web-based, you don't get the typical "works great in Chrome, terrible everywhere else" experience.

Cross-platform without the headaches

The best part? It works everywhere Flutter works. Mobile, web, desktop, all from the same code. No platform-specific chart libraries, no "oh this doesn't work on web" surprises.

I've been using it for dashboards in my own projects and it's been solid. The performance is actually better than the web-based solutions because it's using Flutter's rendering engine instead of fighting with DOM manipulation.

Why grammar of graphics matters

If you've never used ggplot2 or similar libraries, the grammar of graphics approach might seem weird at first. But it's incredibly powerful once it clicks.

Instead of having separate widgets for LineChart, BarChart, ScatterPlot, etc., you have one Chart widget that you compose different layers onto. Want a scatter plot with a trend line? Add both geomPoint() and geomSmooth(). Want to color code by category? Map a column to the color aesthetic.

This composability means you can create complex visualizations that would be impossible (or really ugly) with traditional chart widgets.

The technical stuff

Under the hood, Cristalyse uses Flutter's CustomPainter for rendering, which gives us direct access to the canvas. This means:

Better performance than widget-heavy approaches

Smooth animations using Flutter's animation framework

Consistent rendering across all platforms

Easy integration with Flutter's existing theming system

The data processing pipeline handles missing values gracefully, supports different data types (numeric, categorical, datetime), and includes basic statistical transformations out of the box.

Try it out

It's on pub.dev as cristalyse. Check out cristalyse.com for examples and getting started info, or jump straight to the full documentation at docs.cristalyse.com with interactive examples and a proper quickstart guide.

The docs site has live code examples you can copy-paste, plus a gallery of different chart types with complete source code.

Fair warning: it's still early days (version 0.9.3), so expect some rough edges. But it's functional enough that I'm using it in production for client projects.

What's next

Working on a few things for the next release:

Histogram and density plots

Better mobile touch interactions

More statistical transformations (smoothing, regression lines)

Faceting support for small multiples

Better integration with common Flutter state management patterns

If you've been frustrated with Flutter's chart situation, give it a shot. The GitHub repo is open for issues, feature requests, or if you want to contribute.

Built this because I needed it, figured others might too. Source is on GitHub if you want to poke around or contribute.

Like this project

Completed work

Posted Aug 18, 2025

Developed Cristalyse, a data visualization library for Flutter, enhancing chart capabilities.

Likes

Views