> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cristalyse.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Area Charts

> Filled area charts for showing volume and trends over time

<Card title="View Live Example" icon="play" href="https://example.cristalyse.com/#/area-chart" target="_blank">
  See area charts in action with interactive examples
</Card>

## 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:

```dart theme={null}
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:

```dart theme={null}
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:

```dart theme={null}
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:

```dart theme={null}
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:

```dart theme={null}
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

<AccordionGroup>
  <Accordion title="Choosing Colors">
    * Use transparency wisely to avoid overly dark fills
    * Pick colors that align with your brand identity
    * Ensure color contrast for legibility
  </Accordion>

  <Accordion title="Data Density">
    * Avoid overcrowding data points
    * Consider time-based intervals for X-axis
    * Focus on key data points for emphasis
  </Accordion>

  <Accordion title="Contextual Information">
    * Use tooltips to provide detailed insights
    * Consider adding data labels for clarity
  </Accordion>
</AccordionGroup>

Ready to dive deeper into advanced visualizations? [Explore Dual Axis Charts](charts/dual-axis)