ChartJS Flutter #

ChartJS Flutter provides a seamless way to integrate Chart.js charts into your Flutter applications across all platforms. This package automatically selects the optimal rendering strategy for each platform while providing a consistent API.

🚀 Overview #

What is ChartJS Flutter? #

ChartJS Flutter bridges the gap between Flutter and Chart.js, enabling you to create beautiful, interactive charts with minimal effort. The package handles the complexity of platform-specific rendering, allowing you to focus on your data visualization.

Key features include:

• 📊 Full Chart.js Support - Access to all Chart.js chart types and configuration options
• 🌐 Cross-Platform - Works seamlessly on Web, iOS, Android, and Desktop
• ⚡ Dynamic Updates - Update chart data in real-time using Digia Studio
• 🎨 Highly Customizable - Full access to Chart.js configuration API
• 🔌 Zero Configuration - Smart platform detection with automatic optimization

📦 Installation #

Add ChartJS Flutter to your pubspec.yaml:

dependencies:
  chartjs_flutter: ^1.0.0

Or use the Flutter CLI:

flutter pub add chartjs_flutter

Additional Setup for Mobile/Desktop #

For mobile and desktop platforms, you need to add Chart.js assets to your pubspec.yaml:

flutter:
  assets:
    - packages/chartjs_flutter/assets/chart.umd.min.js
    - packages/chartjs_flutter/assets/chart_template.html

Run:

flutter pub get

🏁 Getting Started #

Basic Line Chart #

Create a simple line chart with just a few lines of code:

import 'package:flutter/material.dart';
import 'package:chartjs_flutter/chartjs_flutter.dart';

class MyChartWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChartJsWidget(
      chartConfig: {
        'type': 'line',
        'data': {
          'labels': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
          'datasets': [
            {
              'label': 'Sales',
              'data': [65, 59, 80, 81, 56, 55],
              'borderColor': 'rgb(75, 192, 192)',
              'tension': 0.1,
            }
          ]
        },
        'options': {
          'responsive': true,
          'maintainAspectRatio': false,
        }
      },
    );
  }
}

Bar Chart Example #

ChartJsWidget(
  chartConfig: {
    'type': 'bar',
    'data': {
      'labels': ['Q1', 'Q2', 'Q3', 'Q4'],
      'datasets': [
        {
          'label': 'Revenue',
          'data': [120, 190, 300, 250],
          'backgroundColor': [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
          ],
          'borderColor': [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
          ],
          'borderWidth': 1,
        }
      ]
    },
    'options': {
      'responsive': true,
      'maintainAspectRatio': false,
      'scales': {
        'y': {
          'beginAtZero': true
        }
      }
    }
  },
)

Pie Chart Example #

ChartJsWidget(
  chartConfig: {
    'type': 'pie',
    'data': {
      'labels': ['Red', 'Blue', 'Yellow', 'Green'],
      'datasets': [
        {
          'data': [300, 50, 100, 80],
          'backgroundColor': [
            'rgb(255, 99, 132)',
            'rgb(54, 162, 235)',
            'rgb(255, 205, 86)',
            'rgb(75, 192, 192)',
          ],
        }
      ]
    }
  },
)

📋 Supported Chart Types #

ChartJS Flutter supports all Chart.js chart types:

• Line - Perfect for trends over time
• Bar - Great for comparing categories
• Pie - Ideal for showing proportions
• Doughnut - Similar to pie with a hole
• Radar - Compare multiple variables
• Polar Area - Show proportions on a circular layout
• Bubble - Display three-dimensional data
• Scatter - Show relationships between variables

For complete Chart.js documentation and configuration options, visit Chart.js Documentation.

🔧 Platform-Specific Details #

Web Platform #

On web, ChartJS Flutter uses:

• HtmlElementView for native browser rendering
• Chart.js loaded from CDN (https://cdn.jsdelivr.net/npm/chart.js)
• Direct JavaScript integration via dart:js_interop

Benefits:

• Lightweight (no additional assets needed)
• Native browser performance
• Automatic script caching

Mobile/Desktop Platforms #

On mobile and desktop, ChartJS Flutter uses:

• WebView for rendering
• Bundled Chart.js library from assets
• JavaScript bridge for chart control

Benefits:

• Consistent behavior across platforms
• Offline support
• Full Chart.js feature parity

📄 License #

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support #

• 📚 Documentation
• 💬 Community
• 🐛 Issue Tracker
• 📧 Contact Support

Built with ❤️ by the Digia team