How to Integrate Charts in Flutter

by | Feb 10, 2025 | Mobile App Development

Flutter has emerged as one of the most popular frameworks for building beautiful, cross-platform applications. Visualizing data through charts is a key requirement for many applications, and Flutter provides seamless integration with charting libraries to meet this need. In this blog, we’ll explore how to integrate and use charts in your Flutter app with the help of the charts_flutter package.

Why Use Charts in Flutter?

Charts help convey data visually, making it easier for users to understand trends and insights. Whether you’re building a financial app, a fitness tracker, or a dashboard, charts can elevate the user experience.

Key benefits of using charts in Flutter:

Real-time Data Visualization: Update charts dynamically as data changes.

Customizable and Interactive: Personalize the look and feel of charts to align with your app’s theme.

Cross-Platform Support: Render charts consistently across Android, iOS, and the web.

Step-by-Step Guide to Integrate Charts in Flutter

Step 1: Add the Dependency

Add the charts_flutter package to your pubspec.yaml file:

  yaml

dependencies:
  charts_flutter: ^0.12.0
Run the following command to install the package:

bash

flutter pub get

Step 2: Import the Charts Package

In your Dart file, import the charts package:

  dart

import 'package:charts_flutter/flutter.dart' as charts;

Step 3: Create a Data Model

Define a data model to represent the data you want to display in the chart. For example, to display sales data: 

dart

class SalesData {
  final String year;
  final int sales;

  SalesData(this.year, this.sales);
}

Step 4: Prepare the Data

Prepare a dataset to feed into the chart:

dart

List> _createSampleData() {
  final data = [
    SalesData('2019', 50),
    SalesData('2020', 120),
    SalesData('2021', 70),
    SalesData('2022', 150),
  ];

  return [
    charts.Series(
      id: 'Sales',
      colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
      domainFn: (SalesData sales, _) => sales.year,
      measureFn: (SalesData sales, _) => sales.sales,
      data: data,
    ),
  ];
  }

Step 5: Add a Chart Widget

To render a bar chart, use the BarChart widget provided by the charts_flutter package:

dart

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;

class ChartExample extends StatelessWidget {
  final List data;

  ChartExample(this.data);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sales Chart'),
      ),
      body: Center(
        child: Container(
          height: 300,
          padding: EdgeInsets.all(16),
          child: charts.BarChart(
            data,
            animate: true,
          ),
        ),
      ),
    );
  }
}

Step 6: Call the Chart Example

In your main.dart file, call the chart widget with the data you prepared:

dart

void main() {
  runApp(MaterialApp(
    home: ChartExample(_createSampleData()),
  ));
}

List> _createSampleData() {
  final data = [
    SalesData('2019', 50),
    SalesData('2020', 120),
    SalesData('2021', 70),
    SalesData('2022', 150),
  ];

  return [
    charts.Series(
      id: 'Sales',
      colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
      domainFn: (SalesData sales, _) => sales.year,
      measureFn: (SalesData sales, _) => sales.sales,
      data: data,
    ),
  ];
}

Customizing Your Chart

You can customize the chart’s appearance and behavior to suit your app’s needs. Here are some common customizations:

Add Titles: Add titles or legends to describe the data.

Change Colors: Use custom color palettes for your charts.

Interactive Features: Enable user interaction, such as tooltips or zooming.

Add Titles: Add titles or legends to describe the data.

Change Colors: Use custom color palettes for your charts.

Interactive Features: Enable user interaction, such as tooltips or zooming.

Example:

dart

charts.BarChart(
  data,
  animate: true,
  behaviors: [
    charts.ChartTitle('Yearly Sales'),
    charts.ChartTitle('Years',
        behaviorPosition: charts.BehaviorPosition.bottom),
    charts.ChartTitle('Sales',
        behaviorPosition: charts.BehaviorPosition.start),
  ],
);

Other Chart Types

The charts_flutter package supports various chart types:

Line Charts: For visualizing trends over time.

Pie Charts: For showing proportions.

Scatter Plots: For analyzing relationships between variables.

Simply replace the BarChart widget with LineChart, PieChart, etc., and adjust the data accordingly.

Conclusion

Integrating charts in Flutter is simple and powerful, allowing you to visualize data effectively. With the charts_flutter package, you can quickly add dynamic and customizable charts to your app. Whether you’re building a dashboard, an analytics tool, or a simple report, charts can make your app more interactive and user-friendly.

Try implementing different chart types and customizing them to enhance your app’s functionality. Happy coding!