Faire un graphique en barres (Bar chart) dans Flutter

À quoi sert un graphique en barres ?

Comme les graphiques en colonnes, les graphiques en barres sont pratiques pour comparer des valeurs entre différentes catégories ou montrer des données discrètes, mais avec une orientation horizontale. Chaque barre représente une valeur associée à une catégorie, avec la longueur indiquant l’ampleur. Ils sont donc parfaits pour :

Comparer des performances (ex. : ventes par région).
Mettre en évidence des différences entre groupes (ex. : dépenses par département).
Présenter des données statiques ou ponctuelles (ex. : scores d’une équipe).

L’orientation horizontale est particulièrement utile quand les étiquettes des catégories sont longues ou nombreuses, offrant une meilleure lisibilité qu’un graphique en colonnes verticales.

Créer un Bar Chart de base

Voici un exemple simple pour afficher des données de ventes annuelles, dans plusieurs régions.

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('Bar Chart de base')),
        body: Center(
          child: SfCartesianChart(
            primaryXAxis: CategoryAxis(),
            series: <BarSeries<SalesData, String>>[
              BarSeries<SalesData, String>(
                dataSource: [
                  SalesData('Région A', 35),
                  SalesData('Région B', 28),
                  SalesData('Région C', 34),
                  SalesData('Région D', 32),
                  SalesData('Région E', 40),
                ],
                xValueMapper: (SalesData sales, _) => sales.region,
                yValueMapper: (SalesData sales, _) => sales.sales,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

Voici les éléments minimum indispensables pour faire un graphique en barres dans Flutter :

SfCartesianChart : Le conteneur principal pour tout graphique cartésien (barres, colonnes, lignes, etc.).
primaryXAxis : Définit l’axe horizontal. Sans cela, le graphique ne sait pas comment interpréter les données X (ici, CategoryAxis pour des régions textuelles).
series : La liste des séries à afficher. Sans série, il n’y a rien à dessiner.
BarSeries : Spécifie qu’on veut un graphique en barres horizontales (remplace ColumnSeries).
dataSource : Les données brutes sous forme de liste d’objets, fournissant les points à afficher.
xValueMapper et yValueMapper : Relient les données aux axes X (catégories) et Y (valeurs). Sans ces mappers, le graphique ne peut pas associer les données aux axes.

Ajouter plusieurs barres à votre graphique

Vous pouvez montrer encore plus de choses avec votre graphique en barres en y affichant plusieurs séries de données pour comparer des catégories. Avec syncfusion_flutter_charts, il suffit d’ajouter plusieurs BarSeries à la liste series de SfCartesianChart. Chaque série peut avoir ses propres données, couleurs et légendes. Par défaut, les colonnes de différentes séries sont placées côte à côte grâce à la propriété enableSideBySideSeriesPlacement.

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

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Bar Chart de base')),
        body: Center(
          child: SfCartesianChart(
            primaryXAxis: CategoryAxis(),
            series: <BarSeries<SalesData, String>>[
              BarSeries<SalesData, String>(
                dataSource: [
                  SalesData('Janvier', 35, 'Région A'),
                  SalesData('Fevrier', 28, 'Région A'),
                  SalesData('Mars', 34, 'Région A'),
                  SalesData('Avril', 32, 'Région A'),
                  SalesData('Mai', 40, 'Région A'),
                ],
                color: Colors.blue,
                xValueMapper: (SalesData sales, _) => sales.region,
                yValueMapper: (SalesData sales, _) => sales.sales,
              ),
              BarSeries<SalesData, String>(
                dataSource: [
                  SalesData('Janvier', 30, 'Région B'),
                  SalesData('Fevrier', 35, 'Région B'),
                  SalesData('Mars', 20, 'Région B'),
                  SalesData('Avril', 26, 'Région B'),
                  SalesData('Mai', 15, 'Région B'),
                ],
                color: Colors.red,
                xValueMapper: (SalesData sales, _) => sales.region,
                yValueMapper: (SalesData sales, _) => sales.sales,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

Si vos séries ont des échelles très différentes (ex. : une en milliers, l’autre en unités), vous pouvez ajouter deuxième axe Y supplémentaire.

Comment personnaliser votre graphique en barres ?

syncfusion_flutter_charts offre de nombreuses options pour personnaliser un Bar Chart. Voici une liste détaillée avec des exemples.

Changer l’apparence des barres

Vous pouvez modifier la couleur, la hauteur et la bordure des barres :

color : Couleur de remplissage des barres (Color comme Colors.teal).
width : Hauteur relative des barres (entre 0 et 1, 1 = pleine hauteur de la catégorie).
borderWidth : Épaisseur de la bordure (en pixels, par défaut 0).
borderColor : Couleur de la bordure (visible si borderWidth > 0).

BarSeries<SalesData, String>(
  dataSource: /* ... */,
  xValueMapper: (SalesData sales, _) => sales.region,
  yValueMapper: (SalesData sales, _) => sales.sales,
  color: Colors.teal,
  width: 0.8, // 80% de la hauteur disponible
  borderWidth: 2,
  borderColor: Colors.black,
),

Ajouter des coins arrondis

borderRadius permet d’arrondir les extrémités des barres (via BorderRadius, ex. : BorderRadius.circular(5)).

BarSeries<SalesData, String>(
  dataSource: /* ... */,
  xValueMapper: (SalesData sales, _) => sales.region,
  yValueMapper: (SalesData sales, _) => sales.sales,
  borderRadius: BorderRadius.circular(5), // Coins arrondis de 5 pixels
),

Barres multicolores

pointColorMapper vous permet d’assigner une couleur à chaque barre via une fonction retournant un Color.

class SalesData {
  SalesData(this.region, this.sales, this.color);
  final String region;
  final double sales;
  final Color color;
}

BarSeries<SalesData, String>(
  dataSource: [
    SalesData('Région A', 35, Colors.red),
    SalesData('Région B', 28, Colors.green),
    SalesData('Région C', 34, Colors.blue),
    SalesData('Région D', 32, Colors.yellow),
    SalesData('Région E', 40, Colors.purple),
  ],
  xValueMapper: (SalesData sales, _) => sales.region,
  yValueMapper: (SalesData sales, _) => sales.sales,
  pointColorMapper: (SalesData sales, _) => sales.color,
),

Ajouter des étiquettes de données

dataLabelSettings vous permet d’afficher des étiquettes de données :

isVisible : true pour afficher les étiquettes.
labelAlignment : Position (ChartDataLabelAlignment.middle, outer, etc.).
textStyle : Style du texte.

BarSeries<SalesData, String>(
  dataSource: /* ... */,
  xValueMapper: (SalesData sales, _) => sales.region,
  yValueMapper: (SalesData sales, _) => sales.sales,
  dataLabelSettings: DataLabelSettings(
    isVisible: true,
    labelAlignment: ChartDataLabelAlignment.outer, // À droite des barres
    textStyle: TextStyle(fontSize: 12, color: Colors.black),
  ),
),

Personnaliser les axes du graphique

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: 'Régions'),
  ),
  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

Il est possible d’ajouter un titre et une légende à votre graphique en barres, grâce aux propriétés suivantes :

title : ChartTitle(text: ‘Ventes par région’).
legend : Legend(isVisible: true).

SfCartesianChart(
  title: ChartTitle(text: 'Ventes par région 2025'),
  legend: Legend(isVisible: true),
  series: /* ... */,
),

Activer les interactions

Vous pouvez afficher des bulles informatives sur vos colonnes, 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: /* ... */,
        ),
      ),
    );
  }
}

Ajouter un deuxième axe Y avec la propriété axes

Quand vos lignes représentent des données avec des unités ou des échelles différentes (ex. : ventes en k€ et taux de croissance en %), un seul axe Y peut rendre le graphique illisible. Avec la propriété axes de SfCartesianChart, vous pouvez ajouter un deuxième axe des ordonnées (ou plus), puis l’associer à une série via yAxisName.

Voici un exemple où une colonne montre les ventes (k€) et une autre le taux de croissance (%) :

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Bar Chart de base')),
        body: Center(
          child: SfCartesianChart(
            primaryXAxis: CategoryAxis(
              title: AxisTitle(text: 'Régions'),
            ),
            primaryYAxis: NumericAxis(
              title: AxisTitle(text: 'Ventes (k€)'),
              minimum: 20,
              maximum: 3000,
            ),
            axes: <ChartAxis>[
              NumericAxis(
                name: 'secondYAxis',
                title: AxisTitle(text: 'Croissance (%)'),
                minimum: 0,
                maximum: 12,
                opposedPosition: true,
              ),
            ],
            series: <BarSeries<SalesData, String>>[
              BarSeries<SalesData, String>(
                dataSource: [
                  SalesData('Janvier', 1000),
                  SalesData('Fevrier', 2000),
                  SalesData('Mars', 1500),
                  SalesData('Avril', 2000),
                  SalesData('Mai', 2500),
                ],
                color: Colors.blue,
                xValueMapper: (SalesData sales, _) => sales.month,
                yValueMapper: (SalesData sales, _) => sales.sales,
              ),
              BarSeries<SalesData, String>(
                yAxisName: 'secondYAxis',
                dataSource: [
                  SalesData('Janvier', 5),
                  SalesData('Fevrier', 2),
                  SalesData('Mars', 10),
                  SalesData('Avril', 6),
                  SalesData('Mai', 1),
                ],
                color: Colors.red,
                xValueMapper: (SalesData sales, _) => sales.month,
                yValueMapper: (SalesData sales, _) => sales.sales,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

Modifier la durée de l’animation d’apparition du graphique

Enfin, vous pouvez allonger ou raccourcir la durée de l’animation d’apparition du graphique, grâce à la propriété animationDuration :

BarSeries<SalesData, String>(
  dataSource: /* ... */,
  xValueMapper: (SalesData sales, _) => sales.region,
  yValueMapper: (SalesData sales, _) => sales.sales,
  animationDuration: 1000, // En millisecondes
),