Examples - Cristalyse Documentation - Flutter Data Visualization Library

Want to see Cristalyse in action? Try our interactive demo →

Chart Gallery

Explore different chart types and their use cases with complete code examples.

Scatter Plots

Point-based visualizations with size and color mapping

Line Charts

Time series and trend analysis

Bar Charts

Categorical data with multiple variations

Area Charts

Volume and cumulative data visualization

Dual Y-Axis

Business dashboards with multiple metrics

Interactive

Tooltips, pan/zoom, and click handlers

Scatter Plots

Basic Scatter Plot

Perfect for exploring relationships between two variables:

final data = [
  {'x': 1, 'y': 2.3, 'category': 'A'},
  {'x': 2, 'y': 3.1, 'category': 'B'},
  {'x': 3, 'y': 1.8, 'category': 'A'},
  {'x': 4, 'y': 4.2, 'category': 'C'},
  {'x': 5, 'y': 2.9, 'category': 'B'},
];

CristalyseChart()
  .data(data)
  .mapping(x: 'x', y: 'y', color: 'category')
  .geomPoint(
    size: 8.0,
    alpha: 0.8,
    shape: PointShape.circle,
    borderWidth: 1.5,
  )
  .scaleXContinuous()
  .scaleYContinuous()
  .theme(ChartTheme.defaultTheme())
  .animate(duration: Duration(milliseconds: 800))
  .build()

Multi-Dimensional Scatter Plot

Using size to encode a third dimension:

final salesData = [
  {'revenue': 100, 'deals': 25, 'region': 'North', 'rep_count': 5},
  {'revenue': 150, 'deals': 30, 'region': 'South', 'rep_count': 8},
  {'revenue': 80, 'deals': 20, 'region': 'East', 'rep_count': 3},
  {'revenue': 200, 'deals': 35, 'region': 'West', 'rep_count': 12},
];

CristalyseChart()
  .data(salesData)
  .mapping(x: 'revenue', y: 'deals', color: 'region', size: 'rep_count')
  .geomPoint(alpha: 0.7)
  .scaleXContinuous(min: 0)
  .scaleYContinuous(min: 0)
  .theme(ChartTheme.defaultTheme())
  .build()

Line Charts

Time Series

Classic time series visualization:

final timeSeriesData = [
  {'month': 'Jan', 'users': 1200, 'platform': 'iOS'},
  {'month': 'Feb', 'users': 1350, 'platform': 'iOS'},
  {'month': 'Mar', 'users': 1100, 'platform': 'iOS'},
  {'month': 'Jan', 'users': 800, 'platform': 'Android'},
  {'month': 'Feb', 'users': 950, 'platform': 'Android'},
  {'month': 'Mar', 'users': 1200, 'platform': 'Android'},
];

CristalyseChart()
  .data(timeSeriesData)
  .mapping(x: 'month', y: 'users', color: 'platform')
  .geomLine(strokeWidth: 3.0)
  .geomPoint(size: 6.0)
  .scaleXOrdinal()
  .scaleYContinuous(min: 0)
  .theme(ChartTheme.defaultTheme())
  .animate(duration: Duration(milliseconds: 1200))
  .build()

Combined Line + Points

Enhanced visualization with both lines and points:

CristalyseChart()
  .data(analyticsData)
  .mapping(x: 'week', y: 'engagement')
  .geomLine(strokeWidth: 2.0, alpha: 0.8)
  .geomPoint(size: 5.0, alpha: 0.9)
  .scaleXContinuous()
  .scaleYContinuous()
  .theme(ChartTheme.darkTheme())
  .build()

Custom Category Colors

Assign specific colors to categories for consistent branding and semantic meaning:

// E-commerce performance by channel
final channelColors = {
  'Organic Search': const Color(0xFF34D399),    // Green - growth
  'Paid Ads': const Color(0xFF60A5FA),         // Blue - investment
  'Social Media': const Color(0xFFF59E0B),     // Yellow - engagement
  'Email': const Color(0xFFEF4444),            // Red - direct
  'Referrals': const Color(0xFF8B5CF6),        // Purple - partnership
};

final channelData = [
  {'quarter': 'Q1', 'revenue': 45000, 'channel': 'Organic Search'},
  {'quarter': 'Q2', 'revenue': 52000, 'channel': 'Organic Search'},
  {'quarter': 'Q1', 'revenue': 28000, 'channel': 'Paid Ads'},
  {'quarter': 'Q2', 'revenue': 35000, 'channel': 'Paid Ads'},
  {'quarter': 'Q1', 'revenue': 18000, 'channel': 'Social Media'},
  {'quarter': 'Q2', 'revenue': 22000, 'channel': 'Social Media'},
  {'quarter': 'Q1', 'revenue': 15000, 'channel': 'Email'},
  {'quarter': 'Q2', 'revenue': 19000, 'channel': 'Email'},
];

CristalyseChart()
  .data(channelData)
  .mapping(x: 'quarter', y: 'revenue', color: 'channel')
  .geomLine(strokeWidth: 2.5)
  .geomPoint(size: 6.0)
  .customPalette(categoryColors: channelColors)
  .scaleXOrdinal()
  .scaleYContinuous(min: 0, labels: (value) => '\$${(value/1000).toInt()}K')
  .build()

Server Health Monitoring

Semantic colors for system status tracking:

// Infrastructure monitoring dashboard
final healthColors = {
  'Healthy': const Color(0xFF10B981),      // Green - all good
  'Warning': const Color(0xFFF59E0B),      // Amber - attention needed
  'Critical': const Color(0xFFEF4444),     // Red - urgent
  'Maintenance': const Color(0xFF6B7280),  // Gray - planned downtime
};

final serverData = [
  {'hour': '00:00', 'count': 12, 'status': 'Healthy'},
  {'hour': '06:00', 'count': 15, 'status': 'Healthy'},
  {'hour': '12:00', 'count': 8, 'status': 'Healthy'},
  {'hour': '00:00', 'count': 2, 'status': 'Warning'},
  {'hour': '06:00', 'count': 3, 'status': 'Warning'},
  {'hour': '12:00', 'count': 1, 'status': 'Warning'},
  {'hour': '00:00', 'count': 0, 'status': 'Critical'},
  {'hour': '06:00', 'count': 1, 'status': 'Critical'},
  {'hour': '12:00', 'count': 2, 'status': 'Critical'},
];

CristalyseChart()
  .data(serverData)
  .mapping(x: 'hour', y: 'count', color: 'status')
  .geomArea(strokeWidth: 1.5, alpha: 0.6)
  .customPalette(categoryColors: healthColors)
  .scaleXOrdinal()
  .scaleYContinuous(min: 0)
  .theme(ChartTheme.darkTheme())
  .build()

Bar Charts

Vertical Bar Chart

Standard categorical data visualization:

final revenueData = [
  {'quarter': 'Q1', 'revenue': 120},
  {'quarter': 'Q2', 'revenue': 150},
  {'quarter': 'Q3', 'revenue': 110},
  {'quarter': 'Q4', 'revenue': 180},
];

CristalyseChart()
  .data(revenueData)
  .mapping(x: 'quarter', y: 'revenue')
  .geomBar(
    width: 0.8,
    alpha: 0.9,
    borderRadius: BorderRadius.circular(4),
  )
  .scaleXOrdinal()
  .scaleYContinuous(min: 0)
  .theme(ChartTheme.defaultTheme())
  .build()

Grouped Bar Chart

Compare multiple series side-by-side:

final productData = [
  {'quarter': 'Q1', 'revenue': 120, 'product': 'Widget A'},
  {'quarter': 'Q2', 'revenue': 150, 'product': 'Widget A'},
  {'quarter': 'Q1', 'revenue': 80, 'product': 'Widget B'},
  {'quarter': 'Q2', 'revenue': 110, 'product': 'Widget B'},
];

CristalyseChart()
  .data(productData)
  .mapping(x: 'quarter', y: 'revenue', color: 'product')
  .geomBar(
    style: BarStyle.grouped,
    width: 0.8,
    alpha: 0.9,
  )
  .scaleXOrdinal()
  .scaleYContinuous(min: 0)
  .theme(ChartTheme.defaultTheme())
  .build()

Stacked Bar Chart

Show composition and totals:

final budgetData = [
  {'department': 'Marketing', 'amount': 50, 'category': 'Personnel'},
  {'department': 'Marketing', 'amount': 30, 'category': 'Technology'},
  {'department': 'Marketing', 'amount': 20, 'category': 'Travel'},
  {'department': 'Sales', 'amount': 80, 'category': 'Personnel'},
  {'department': 'Sales', 'amount': 25, 'category': 'Technology'},
];

CristalyseChart()
  .data(budgetData)
  .mapping(x: 'department', y: 'amount', color: 'category')
  .geomBar(
    style: BarStyle.stacked,
    width: 0.8,
    alpha: 0.9,
  )
  .scaleXOrdinal()
  .scaleYContinuous(min: 0)
  .theme(ChartTheme.defaultTheme())
  .build()

Horizontal Bar Chart

Great for long category names:

CristalyseChart()
  .data(departmentData)
  .mapping(x: 'department', y: 'headcount')
  .geomBar(
    borderRadius: BorderRadius.circular(4),
    borderWidth: 1.0,
  )
  .coordFlip() // Makes it horizontal
  .scaleXOrdinal()
  .scaleYContinuous(min: 0)
  .theme(ChartTheme.defaultTheme())
  .build()

Area Charts

Basic Area Chart

Perfect for showing volume over time:

final trafficData = [
  {'month': 'Jan', 'visitors': 1200},
  {'month': 'Feb', 'visitors': 1350},
  {'month': 'Mar', 'visitors': 1100},
  {'month': 'Apr', 'visitors': 1800},
  {'month': 'May', 'visitors': 1650},
];

CristalyseChart()
  .data(trafficData)
  .mapping(x: 'month', y: 'visitors')
  .geomArea(
    strokeWidth: 2.0,
    alpha: 0.3,
    fillArea: true,
    color: Colors.blue,
  )
  .scaleXOrdinal()
  .scaleYContinuous(min: 0)
  .animate(duration: Duration(milliseconds: 1200))
  .build()

Multi-Series Area Chart

Compare multiple categories:

final platformData = [
  {'month': 'Jan', 'users': 800, 'platform': 'Mobile'},
  {'month': 'Feb', 'users': 900, 'platform': 'Mobile'},
  {'month': 'Jan', 'users': 400, 'platform': 'Desktop'},
  {'month': 'Feb', 'users': 450, 'platform': 'Desktop'},
];

CristalyseChart()
  .data(platformData)
  .mapping(x: 'month', y: 'users', color: 'platform')
  .geomArea(strokeWidth: 1.5, alpha: 0.4)
  .scaleXOrdinal()
  .scaleYContinuous(min: 0)
  .build()

Combined Area + Line + Points

Layered visualization for rich data stories:

CristalyseChart()
  .data(analyticsData)
  .mapping(x: 'date', y: 'value')
  .geomArea(alpha: 0.2, strokeWidth: 0)  // Background fill
  .geomLine(strokeWidth: 3.0)             // Trend line
  .geomPoint(size: 6.0)                   // Data points
  .scaleXContinuous()
  .scaleYContinuous(min: 0)
  .build()

Dual Y-Axis

Business Dashboard

Revenue vs conversion rate on independent scales:

final businessData = [
  {'month': 'Jan', 'revenue': 120, 'conversion_rate': 2.3},
  {'month': 'Feb', 'revenue': 150, 'conversion_rate': 2.8},
  {'month': 'Mar', 'revenue': 110, 'conversion_rate': 2.1},
  {'month': 'Apr', 'revenue': 180, 'conversion_rate': 3.2},
];

CristalyseChart()
  .data(businessData)
  .mapping(x: 'month', y: 'revenue')        // Primary Y-axis
  .mappingY2('conversion_rate')             // Secondary Y-axis
  .geomBar(
    yAxis: YAxis.primary,                   // Revenue bars (left scale)
    alpha: 0.7,
  )
  .geomLine(
    yAxis: YAxis.secondary,                 // Conversion line (right scale)
    strokeWidth: 3.0,
    color: Colors.orange,
  )
  .geomPoint(
    yAxis: YAxis.secondary,                 // Points on conversion line
    size: 8.0,
    color: Colors.orange,
  )
  .scaleXOrdinal()
  .scaleYContinuous(min: 0)                 // Left axis: Revenue
  .scaleY2Continuous(min: 0, max: 5)        // Right axis: Percentage
  .theme(ChartTheme.defaultTheme())
  .build()

Sales Volume vs Customer Satisfaction

CristalyseChart()
  .data(salesData)
  .mapping(x: 'week', y: 'sales_volume')
  .mappingY2('satisfaction_score')
  .geomBar(yAxis: YAxis.primary)            // Volume bars
  .geomLine(yAxis: YAxis.secondary)         // Satisfaction trend
  .scaleY2Continuous(min: 1, max: 5)        // Rating scale
  .build()

Interactive Charts

Tooltips and Click Handlers

Add rich interactivity to your charts:

CristalyseChart()
  .data(salesData)
  .mapping(x: 'week', y: 'revenue', color: 'rep')
  .geomPoint(size: 8.0)
  .interaction(
    tooltip: TooltipConfig(
      builder: (point) {
        final category = point.getDisplayValue('rep');
        final value = point.getDisplayValue('revenue');
        return Container(
          padding: const EdgeInsets.all(8),
          decoration: BoxDecoration(
            color: Colors.black.withOpacity(0.8),
            borderRadius: BorderRadius.circular(4),
          ),
          child: Text(
            '$category: \$${value}k',
            style: const TextStyle(color: Colors.white, fontSize: 12),
          ),
        );
      },
    ),
    click: ClickConfig(
      onTap: (point) {
        print('Tapped on: ${point.data}');
        // Show dialog, navigate, etc.
      },
    ),
  )
  .build()

Panning for Large Datasets

Interactive exploration of time series data:

CristalyseChart()
  .data(largeTimeSeriesData)
  .mapping(x: 'timestamp', y: 'value', color: 'series')
  .geomLine(strokeWidth: 2.0)
  .geomPoint(size: 4.0)
  .interaction(
    pan: PanConfig(
      enabled: true,
      updateXDomain: true,  // Allow horizontal panning
      updateYDomain: false, // Disable vertical panning
      onPanUpdate: (info) {
        print('Visible range: ${info.visibleMinX} - ${info.visibleMaxX}');
        // Load more data, update UI, etc.
      },
    ),
  )
  .build()

Theming Examples

Dark Theme

CristalyseChart()
  .data(data)
  .mapping(x: 'x', y: 'y')
  .geomPoint()
  .theme(ChartTheme.darkTheme())
  .build()

Custom Theme

final customTheme = ChartTheme(
  backgroundColor: Colors.grey[50]!,
  primaryColor: Colors.deepPurple,
  colorPalette: [Colors.blue, Colors.red, Colors.green],
  gridColor: Colors.grey[300]!,
  axisTextStyle: TextStyle(fontSize: 14, color: Colors.black87),
  padding: EdgeInsets.all(40),
);

CristalyseChart()
  .data(data)
  .mapping(x: 'x', y: 'y')
  .geomPoint()
  .theme(customTheme)
  .build()

Animation Examples

Elastic Animation

CristalyseChart()
  .data(data)
  .mapping(x: 'x', y: 'y')
  .geomPoint()
  .animate(
    duration: Duration(milliseconds: 1200),
    curve: Curves.elasticOut,
  )
  .build()

Staggered Bar Animation

CristalyseChart()
  .data(data)
  .mapping(x: 'category', y: 'value')
  .geomBar()
  .animate(
    duration: Duration(milliseconds: 1400),
    curve: Curves.easeInOutCubic,
  )
  .build()

Ready to build your own charts? Start with the Quick Start Guide or explore specific Chart Types!

Get Started

Chart Types

Features

Advanced

​Chart Gallery

Scatter Plots

Line Charts

Bar Charts

Area Charts

Dual Y-Axis

Interactive

​Scatter Plots

​Basic Scatter Plot

​Multi-Dimensional Scatter Plot

​Line Charts

​Time Series

​Combined Line + Points

​Custom Category Colors

​Server Health Monitoring

​Bar Charts

​Vertical Bar Chart

​Grouped Bar Chart

​Stacked Bar Chart

​Horizontal Bar Chart

​Area Charts

​Basic Area Chart

​Multi-Series Area Chart

​Combined Area + Line + Points

​Dual Y-Axis

​Business Dashboard

​Sales Volume vs Customer Satisfaction

​Interactive Charts

​Tooltips and Click Handlers

​Panning for Large Datasets

​Theming Examples

​Dark Theme

​Custom Theme

​Animation Examples

​Elastic Animation

​Staggered Bar Animation

Chart Gallery

Scatter Plots

Basic Scatter Plot

Multi-Dimensional Scatter Plot

Line Charts

Time Series

Combined Line + Points

Custom Category Colors

Server Health Monitoring

Bar Charts

Vertical Bar Chart

Grouped Bar Chart

Stacked Bar Chart

Horizontal Bar Chart

Area Charts

Basic Area Chart

Multi-Series Area Chart

Combined Area + Line + Points

Dual Y-Axis

Business Dashboard

Sales Volume vs Customer Satisfaction

Interactive Charts

Tooltips and Click Handlers

Panning for Large Datasets

Theming Examples

Dark Theme

Custom Theme

Animation Examples

Elastic Animation

Staggered Bar Animation