Graphiques dans Flutter avec syncfusion_flutter_charts

Créer des graphiques dans Flutter grâce à syncfusion_flutter_charts

Flutter ne permet pas de créer simplement des graphiques de manière native. Heureusement, le package syncfusion_flutter_charts va pouvoir nous aider dans cette tâche. Celui-ci est développé par Syncfusion, une entreprise reconnue pour ses outils de visualisation de données.

Que vous ayez besoin d’un simple graphique en barres ou d’un graphique financier avancé, il répond à une large gamme de besoins avec des performances optimisées et une documentation claire. De plus, son utilisation reste gratuite pour les projets individuels ou petites équipes grâce à sa licence communautaire.

Mettre en place syncfusion_flutter_charts dans votre application Flutter

Pour ajouter le package syncfusion_flutter_charts à votre projet Flutter, commencez par ouvrir votre fichier pubspec.yaml et ajoutez la dépendance suivante sous la section dependencies :

dependencies:
  syncfusion_flutter_charts: ^28.2.12 #Remplacer par sa dernière version

Ensuite, exécutez cette commande dans votre terminal pour installer le package :

flutter pub get

Le package est déjà prêt à être utilisé dans votre projet Flutter. Pour cela, ajoutez cette ligne d’importation dans le fichier Dart où vous souhaitez utiliser les graphiques :

import 'package:syncfusion_flutter_charts/charts.dart';

Puis voici un exemple rapide pour afficher un graphique en ligne simple :

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('Graphique Syncfusion')),
        body: Center(
          child: SfCartesianChart(
            primaryXAxis: CategoryAxis(),
            title: ChartTitle(text: 'Ventes mensuelles 2025'),
            series: <LineSeries<SalesData, String>>[
              LineSeries<SalesData, String>(
                dataSource: [
                  SalesData('Jan', 35),
                  SalesData('Fév', 28),
                  SalesData('Mar', 42),
                  SalesData('Apr', 58),
                  SalesData('May', 36),
                  SalesData('Jun', 32),
                ],
                xValueMapper: (SalesData sales, _) => sales.month,
                yValueMapper: (SalesData sales, _) => sales.sales,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

Les types de graphiques disponibles

syncfusion_flutter_charts propose une large gamme de graphiques, regroupés en plusieurs catégories. Voici les principaux types et à quoi ils servent :

Graphiques cartésiens (SfCartesianChart)

1. Graphique en lignes (Line Chart) : Montre les tendances continues, idéal pour des données temporelles.
2. Graphique en colonnes (Column Chart) : Compare des catégories avec des barres verticales.
3. Graphique en barres (Bar Chart) : Comme les colonnes, mais avec des barres horizontales.
4. Graphique en aires (Area Chart) : Remplit la zone sous une ligne pour mettre en évidence les volumes.
5. Graphique à dispersion (Scatter Chart) : Affiche des points pour montrer des corrélations.
6. Graphique en bulles (Bubble Chart) : Une variante de dispersion avec des tailles variables.
7. Graphique financier (Candle, HLC, OHLC) : Conçu pour les données boursières.

Graphiques circulaires (SfCircularChart)

8. Graphique en camembert (Pie Chart) : Représente des proportions sous forme de tranches.
9. Graphique en anneau (Doughnut Chart) : Un camembert avec un trou central.
10. Graphique radial (Radial Bar Chart) : Une version circulaire des barres.

Graphiques spécialisés

11. Graphique en entonnoir (SfFunnelChart) : Visualise des étapes décroissantes (ex. : funnel de conversion).
12. Graphique en pyramide (SfPyramidChart) : Similaire à l’entonnoir, en forme de pyramide.

Micro-graphiques (Spark Charts)

13. Spark Line/Area/Bar/Win-Loss : Graphiques légers pour des tendances dans un espace réduit.

Tarification de syncfusion_flutter_charts

Syncfusion adopte une approche flexible pour la tarification en ayant deux options :

• Licence communautaire (gratuite) : Disponible pour les développeurs individuels ou petites équipes (moins de 5 personnes et moins de 1 million de dollars de revenus annuels). Vous avez accès à toutes les fonctionnalités sans frais.
• Licence commerciale : Pour les entreprises plus grandes, Syncfusion propose des licences payantes, avec un pack incluant plusieurs widgets (pas seulement les graphiques). Le prix dépend de la taille de votre équipe et de vos besoins, mais vous pouvez retrouver la grille tarifaire sur leur site officiel.