Skip to main content

View Live Example

See area charts in action with interactive examples

​
Overview

Area charts are great for displaying volume and cumulative data over time. Cristalyse adds smooth animations and options for multi-series, stacked, and combined area charts.

​
Basic Area Chart

Show volume over time with a filled area: 
final data = [
  {'month': 'Jan', 'visitors': 1200},
  {'month': 'Feb', 'visitors': 1350},
  {'month': 'Mar', 'visitors': 1100},
];

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

​
Multi-Series Area Chart

Compare multiple categories with stacked areas: 
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 deep insights: 
CristalyseChart()
  .data(analyticsData)
  .mapping(x: 'week', y: 'engagement')
  .geomArea(alpha: 0.2, strokeWidth: 0)  // Background fill
  .geomLine()
  .geomPoint(size: 5.0)
  .theme(ChartTheme.darkTheme())
  .build()

​
Stacked Area Charts

Visualize composition of total data: 
final revenueData = [
  {'quarter': 'Q1', 'revenue': 80, 'category': 'Software'},
  {'quarter': 'Q1', 'revenue': 40, 'category': 'Hardware'},
  {'quarter': 'Q2', 'revenue': 100, 'category': 'Software'},
  {'quarter': 'Q2', 'revenue': 60, 'category': 'Hardware'},
];

CristalyseChart()
  .data(revenueData)
  .mapping(x: 'quarter', y: 'revenue', color: 'category')
  .geomArea(strokeWidth: 2.0, alpha: 0.3)
  .scaleXOrdinal()
  .scaleYContinuous(min: 0)
  .build()

​
Interactive Features

​
Hover Tooltips

Provide context with tooltips: 
CristalyseChart()
  .data(data)
  .mapping(x: 'month', y: 'visitors')
  .geomArea(
    alpha: 0.3,
    strokeWidth: 2.0,
  )
  .interaction(
    tooltip: TooltipConfig(
      builder: (point) = Container(
        padding: EdgeInsets.all(8),
        decoration: BoxDecoration(
          color: Colors.black.withOpacity(0.8),
          borderRadius: BorderRadius.circular(4),
        ),
        child: Text(
          '${point.getDisplayValue('month')}: ${point.getDisplayValue('visitors')} visitors',
          style: TextStyle(color: Colors.white),
        ),
      ),
    ),
  )
  .build()

​
Performance Optimizations

Consider these tips for optimal performance with large datasets:
  • Use lighter gradients and colors
  • Optimize data point count and reduce chart complexity

​
Common Uses

Ideal for displaying trends in data like website traffic, sales, or user engagement. Area charts excel in visualizing relative compositions or whole-part relationships.

​
Best Practices

  • Use transparency wisely to avoid overly dark fills
  • Pick colors that align with your brand identity
  • Ensure color contrast for legibility
  • Avoid overcrowding data points
  • Consider time-based intervals for X-axis
  • Focus on key data points for emphasis
  • Use tooltips to provide detailed insights
  • Consider adding data labels for clarity
Ready to dive deeper into advanced visualizations? Explore Dual Axis Charts
⌘I