Faire un graphique en aires (Area Chart) dans Flutter

À quoi sert un graphique en aires ?

Les graphiques en aires sont idéaux pour visualiser des données continues et montrer l’évolution ou la tendance d’une grandeur sur un intervalle, souvent temporel. Ils remplissent l’espace sous une ligne pour mettre en évidence le volume ou la magnitude cumulée des données. Ils sont particulièrement utiles pour :

Suivre des tendances sur une période (ex. : ventes mensuelles sur un an).
Comparer plusieurs ensembles de données continues (ex. : performances de plusieurs équipes).
Mettre en évidence des variations ou des cumuls (ex. : consommation énergétique au fil du temps).

Créer un Area Chart de base

Voici un exemple simple pour afficher des données de ventes mensuelles sous forme de graphique en aires.

Assurez-vous au préalable de bien avoir mis en place syncfusion_flutter_charts en ajoutant sa dépendance dans votre fichier pubspec.yaml.

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Area Chart de base')),
        body: Center(
          child: SfCartesianChart(
            primaryXAxis: CategoryAxis(),
            series: <AreaSeries<SalesData, String>>[
              AreaSeries<SalesData, String>(
                dataSource: [
                  SalesData('Jan', 35),
                  SalesData('Fév', 28),
                  SalesData('Mar', 34),
                  SalesData('Avr', 32),
                  SalesData('Mai', 40),
                ],
                xValueMapper: (SalesData sales, _) => sales.month,
                yValueMapper: (SalesData sales, _) => sales.sales,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class SalesData {
  SalesData(this.month, this.sales);
  final String month;
  final double sales;
}

Voici les éléments essentiels pour créer un graphique en aires dans Flutter :

SfCartesianChart : Le conteneur principal pour les graphiques cartésiens (aires, lignes, barres, etc.).
primaryXAxis : Définit l’axe horizontal (ici, CategoryAxis pour des mois textuels).
series : Liste des séries à afficher. Sans cela, rien ne s’affiche.
AreaSeries : Indique qu’on veut un graphique en aires (remplace BarSeries ou LineSeries).
dataSource : Les données sous forme de liste d’objets.
xValueMapper et yValueMapper : Relient les données aux axes X (catégories) et Y (valeurs).

Ajouter plusieurs aires à votre graphique

Pour comparer plusieurs séries de données (par exemple, les ventes de différentes régions), vous pouvez ajouter plusieurs AreaSeries dans la liste series. Par défaut, les aires se superposent, mais vous pouvez ajuster leur apparence avec des transparences ou des couleurs distinctes.

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Area Chart avec plusieurs séries')),
        body: Center(
          child: SfCartesianChart(
            primaryXAxis: CategoryAxis(),
            series: <AreaSeries<SalesData, String>>[
              AreaSeries<SalesData, String>(
                dataSource: [
                  SalesData('Jan', 35),
                  SalesData('Fév', 28),
                  SalesData('Mar', 34),
                  SalesData('Avr', 32),
                  SalesData('Mai', 40),
                ],
                color: Colors.blue.withOpacity(0.5),
                xValueMapper: (SalesData sales, _) => sales.month,
                yValueMapper: (SalesData sales, _) => sales.sales,
              ),
              AreaSeries<SalesData, String>(
                dataSource: [
                  SalesData('Jan', 30),
                  SalesData('Fév', 35),
                  SalesData('Mar', 20),
                  SalesData('Avr', 26),
                  SalesData('Mai', 15),
                ],
                color: Colors.red.withOpacity(0.5),
                xValueMapper: (SalesData sales, _) => sales.month,
                yValueMapper: (SalesData sales, _) => sales.sales,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class SalesData {
  SalesData(this.month, this.sales);
  final String month;
  final double sales;
}

Comment personnaliser votre graphique en aires ?

La bibliothèque syncfusion_flutter_charts offre de nombreuses options pour personnaliser un Area Chart. Voici les principales possibilités.

Changer l’apparence des aires

Vous pouvez modifier la couleur, la transparence et les bordures de votre graphique en aires, grâce aux propriétés suivantes :

color : Couleur de remplissage (ex. : Colors.blue.withOpacity(0.5)).
opacity : Transparence (0 à 1, utile pour superposer des séries).
borderWidth : Épaisseur de la bordure (par défaut 0).
borderColor : Couleur de la bordure (visible si borderWidth > 0).

AreaSeries<SalesData, String>(
  dataSource: /* ... */,
  xValueMapper: (SalesData sales, _) => sales.month,
  yValueMapper: (SalesData sales, _) => sales.sales,
  color: Colors.teal.withOpacity(0.6),
  borderWidth: 2,
  borderColor: Colors.black,
),

Ajouter un gradient

Au lieu de leur donner une couleur unie, vous pouvez créer un dégradé à vos aires :

AreaSeries<SalesData, String>(
  dataSource: /* ... */,
  xValueMapper: (SalesData sales, _) => sales.month,
  yValueMapper: (SalesData sales, _) => sales.sales,
  gradient: LinearGradient(
    colors: [Colors.blue, Colors.blue.withOpacity(0.1)],
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
  ),
),

Ajouter des étiquettes de données

Affichez les valeurs de votre série, directement au dessus de vos aires, grâce à la propriété dataLabelSettings :

isVisible : Active les étiquettes.
labelAlignment : Position (ex. : ChartDataLabelAlignment.top).

AreaSeries<SalesData, String>(
  dataSource: /* ... */,
  xValueMapper: (SalesData sales, _) => sales.month,
  yValueMapper: (SalesData sales, _) => sales.sales,
  dataLabelSettings: DataLabelSettings(
    isVisible: true,
    labelAlignment: ChartDataLabelAlignment.top,
    textStyle: TextStyle(fontSize: 12, color: Colors.black),
  ),
),

Personnaliser vos axes de données

primaryXAxis : Définit le type de l’axe horizontal. Par exemple CategoryAxis (catégories textuelles), NumericAxis (nombres), etc.
- title : Ajoute un titre via AxisTitle(text: ‘Mois’).
primaryYAxis : Axe vertical. Généralement NumericAxis pour les colonnes.
- title : Titre de l’axe Y.
- minimum : Valeur minimale (ex. : 0).
- maximum : Valeur maximale (ex. : 50).
- interval : Espacement entre les marques (ex. : 10).

SfCartesianChart(
  primaryXAxis: CategoryAxis(
    title: AxisTitle(text: 'Mois'),
  ),
  primaryYAxis: NumericAxis(
    title: AxisTitle(text: 'Ventes (k€)'),
    minimum: 0,
    maximum: 50,
    interval: 10,
  ),
  series: /* ... */,
),

Attention, les possibilités de personnalisation ne sont pas les mêmes selon le type d’axe. Voici les différentes variantes que vous pouvez utiliser :

Type	Données adaptées	Exemple d’usage
NumericAxis	Nombres continus	Années, quantités
CategoryAxis	Catégories textuelles	Mois, noms de produits
DateTimeAxis	Dates/heures continues	Ventes par jour
DateTimeCategoryAxis	Dates discrètes	Premiers jours des mois
LogarithmicAxis	Données exponentielles	Croissance logarithmique

Ajouter un titre et une légende

Ajoutez un titre et une légende à votre graphique en aires, graphiques aux propriétés title (pour le titre) et legend (pour ajouter une légende) :

SfCartesianChart(
  title: ChartTitle(text: 'Ventes mensuelles 2025'),
  legend: Legend(isVisible: true),
  series: /* ... */,
),

Ajouter des interactions

Vous pouvez afficher des bulles informatives sur vos aires, grâce à la propriété tooltipBehavior. Pour cela, vous devrez créer un widget de type TooltipBehavior, contenant les éléments suivants :

enable : true pour activer.
color : Couleur de fond (ex. : Colors.grey).
textStyle : Style du texte dans la bulle.

class MyApp extends StatelessWidget {
  final TooltipBehavior _tooltip = TooltipBehavior(
    enable: true,
    color: Colors.grey[800],
    textStyle: TextStyle(color: Colors.white),
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SfCartesianChart(
          tooltipBehavior: _tooltip,
          series: /* ... */,
        ),
      ),
    );
  }
}

Contrôler la durée d’apparition du graphique

Enfin, ajustez la durée de l’animation d’apparition de votre graphique en aires, avec la propriété animationDuration :

AreaSeries<SalesData, String>(
  dataSource: /* ... */,
  xValueMapper: (SalesData sales, _) => sales.month,
  yValueMapper: (SalesData sales, _) => sales.sales,
  animationDuration: 1500, // 1,5 seconde
),