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

�7fAccordionGroup> �7fAccordion title=“Choosing Colors”>

  • Use transparency wisely to avoid overly dark fills
  • Pick colors that align with your brand identity
  • Ensure color contrast for legibility �7f/Accordion>

�7fAccordion title=“Data Density”>

  • Avoid overcrowding data points
  • Consider time-based intervals for X-axis
  • Focus on key data points for emphasis �7f/Accordion>

�7fAccordion title=“Contextual Information”>

  • Use tooltips to provide detailed insights
  • Consider adding data labels for clarity �7f/Accordion> �7f/AccordionGroup>

Ready to dive deeper into advanced visualizations? Explore Dual Axis Charts