Hacer gráficos en Flutter con syncfusion_flutter_charts

Crear gráficos en Flutter gracias a syncfusion_flutter_charts

Flutter no permite crear gráficos de manera sencilla de forma nativa. Afortunadamente, el paquete syncfusion_flutter_charts puede ayudarnos en esta tarea. Este paquete está desarrollado por Syncfusion, una empresa reconocida por sus herramientas de visualización de datos.

Ya sea que necesites un gráfico de barras simple o un gráfico financiero avanzado, este paquete cubre una amplia gama de necesidades con un rendimiento optimizado y una documentación clara. Además, su uso sigue siendo gratuito para proyectos individuales o equipos pequeños gracias a su licencia comunitaria.

Configurar syncfusion_flutter_charts en tu aplicación Flutter

Para agregar el paquete syncfusion_flutter_charts a tu proyecto Flutter, comienza abriendo tu archivo pubspec.yaml y añade la siguiente dependencia en la sección dependencies:

dependencies:
  syncfusion_flutter_charts: ^28.2.12 #Reemplazar con la última versión

Luego, ejecuta este comando en tu terminal para instalar el paquete:

flutter pub get

El paquete ya está listo para usarse en tu proyecto Flutter. Para ello, añade esta línea de importación en el archivo Dart donde deseas usar los gráficos:

import 'package:syncfusion_flutter_charts/charts.dart';

Aquí tienes un ejemplo rápido para mostrar un gráfico de líneas 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('Gráfico Syncfusion')),
        body: Center(
          child: SfCartesianChart(
            primaryXAxis: CategoryAxis(),
            title: ChartTitle(text: 'Ventas mensuales 2025'),
            series: <LineSeries<SalesData, String>>[
              LineSeries<SalesData, String>(
                dataSource: [
                  SalesData('Ene', 35),
                  SalesData('Feb', 28),
                  SalesData('Mar', 42),
                  SalesData('Abr', 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;
}

Los tipos de gráficos disponibles

syncfusion_flutter_charts ofrece una amplia gama de gráficos, agrupados en varias categorías. Aquí están los principales tipos y para qué sirven:

Gráficos cartesianos (SfCartesianChart)

1. Gráfico de líneas (Line Chart): Muestra tendencias continuas, ideal para datos temporales.
2. Gráfico de columnas (Column Chart): Compara categorías con barras verticales.
3. Gráfico de barras (Bar Chart): Similar a las columnas, pero con barras horizontales.
4. Gráfico de áreas (Area Chart): Rellena el área bajo una línea para destacar volúmenes.
5. Gráfico de dispersión (Scatter Chart): Muestra puntos para indicar correlaciones.
6. Gráfico de burbujas (Bubble Chart): Una variante de dispersión con tamaños variables.
7. Gráfico financiero (Candle, HLC, OHLC): Diseñado para datos bursátiles.

Gráficos circulares (SfCircularChart)

1. Gráfico de pastel (Pie Chart): Representa proporciones en forma de sectores.
2. Gráfico de anillo (Doughnut Chart): Un pastel con un agujero central.
3. Gráfico radial (Radial Bar Chart): Una versión circular de las barras.

Gráficos especializados

1. Gráfico de embudo (SfFunnelChart): Visualiza etapas decrecientes (por ejemplo, embudo de conversión).
2. Gráfico de pirámide (SfPyramidChart): Similar al embudo, en forma de pirámide.

Micrográficos (Spark Charts)

1. Spark Line/Area/Bar/Win-Loss: Gráficos ligeros para tendencias en un espacio reducido.

Precios de syncfusion_flutter_charts

Syncfusion adopta un enfoque flexible para los precios con dos opciones:

Licencia comunitaria (gratuita): Disponible para desarrolladores individuales o equipos pequeños (menos de 5 personas y menos de 1 millón de dólares de ingresos anuales). Tienes acceso a todas las funcionalidades sin costo.

Licencia comercial: Para empresas más grandes, Syncfusion ofrece licencias pagadas, con un paquete que incluye varios widgets (no solo los gráficos). El precio depende del tamaño de tu equipo y tus necesidades, pero puedes encontrar la tabla de precios en su sitio web oficial.