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