stack_chart 1.2.2

A comprehensive Flutter package for creating beautiful, customizable charts and animations.

Stack Chart 📊

A comprehensive Flutter package for creating beautiful, customizable charts and animations.

✨ Features

• 📊 Stack Charts: Dynamic stacked bar charts for booking status and resource allocation
• 📈 Line Charts: Multi-series line charts with grid and labels
• 📊 Bar Charts: Vertical and horizontal bar charts with full customization
• 🥧 Pie & Donut Charts: Interactive charts with legends and percentages
• 📅 Gantt Charts: Project timeline charts with time intervals and breaks
• 📊 Histograms: Data distribution charts with automatic binning
• 🫧 Bubble Charts: Multi-dimensional data visualization with size scaling
• 📚 Stacked Bar Charts: Segmented bars with percentage display
• 🔻 Funnel Charts: Conversion funnel visualization
• ⚡ Gauge Charts: Speedometer-style charts with ranges and needles
• 🗺️ HeatMaps: Color-coded data visualization with gradients
• 📡 Radar Charts: Multi-axis comparison charts
• 🌳 TreeMaps: Hierarchical data with nested rectangles
• 📊 Pictographs: Icon-based data representation
• 🎉 Confetti Animations: Customizable particle animations for celebrations
• 🎨 Fully Customizable: Colors, styles, dimensions, and animations
• 📱 Cross-Platform: Works on iOS, Android, Web, Windows, macOS, and Linux
• 🚀 Performance Optimized: Efficient rendering with no external dependencies
• ♿ Accessibility: Built-in accessibility support

🚀 Getting Started

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  stack_chart: ^2.0.0

Then run:

flutter pub get

Import

import 'package:stack_chart/stack_chart.dart';

📊 Quick Start Guide

Stack Chart - Resource Management

MacStackChart(
  chartTitle: "Booking Status Chart",
  dateFormat: "h a",
  chartData: [
    ChartData("2024-01-01T09:00:00", "2024-01-01T10:00:00", ["Available", "Booked"]),
    ChartData("2024-01-01T10:00:00", "2024-01-01T11:00:00", ["Booked", "Maintenance"]),
  ],
  chartLabel: [
    ChartLabel("Available", Colors.green),
    ChartLabel("Booked", Colors.red),
    ChartLabel("Maintenance", Colors.orange),
  ],
  chartText: ChartText("20 Minutes", Colors.grey),
  containerHeight: 40,
  containerWidth: 60,
  backgroundColor: Colors.transparent,
  chartBackgroundColor: Colors.white,
)

Line Chart - Trend Analysis

CustomLineChart(
  series: [
    LineSeries(
      points: [
        LinePoint(0, 10),
        LinePoint(1, 15),
        LinePoint(2, 8),
        LinePoint(3, 20),
      ],
      color: Colors.blue,
      name: 'Sales',
    ),
  ],
  title: 'Sales Trend',
  showGrid: true,
  showLegend: true,
)

Bar Chart - Comparative Data

CustomBarChart(
  data: [
    BarData('Jan', 20, Colors.blue),
    BarData('Feb', 35, Colors.green),
    BarData('Mar', 15, Colors.orange),
  ],
  title: 'Monthly Sales',
  horizontal: false,
  showGrid: true,
)

Pie Chart - Distribution Analysis

CustomPieChart(
  data: [
    PieData('Mobile', 45, Colors.blue),
    PieData('Desktop', 30, Colors.green),
    PieData('Tablet', 25, Colors.orange),
  ],
  title: 'Device Usage',
  showLegend: true,
  showPercentages: true,
)

Radar Chart - Multi-Dimensional Comparison

CustomRadarChart(
  data: [
    RadarData(
      values: [80, 90, 70, 85, 75],
      color: Colors.blue,
      label: 'Team A',
    ),
  ],
  labels: ['Speed', 'Quality', 'Efficiency', 'Innovation', 'Teamwork'],
  maxValue: 100,
  showGrid: true,
)

Gantt Chart - Project Timeline

CustomGanttChart(
  tasks: [
    GanttTask(
      name: 'Planning',
      startTime: DateTime(2024, 1, 1, 9, 0),
      endTime: DateTime(2024, 1, 1, 11, 0),
      color: Colors.blue,
    ),
    GanttTask(
      name: 'Development',
      startTime: DateTime(2024, 1, 1, 11, 30),
      endTime: DateTime(2024, 1, 1, 15, 30),
      color: Colors.green,
    ),
  ],
  title: 'Project Timeline',
  timeInterval: Duration(minutes: 30),
)

Bubble Chart - Multi-Dimensional Data

CustomBubbleChart(
  data: [
    BubbleData(x: 20, y: 30, size: 25, color: Colors.blue, label: 'Product A'),
    BubbleData(x: 40, y: 50, size: 35, color: Colors.green, label: 'Product B'),
  ],
  title: 'Performance vs Market Share',
  xAxisLabel: 'Performance Score',
  yAxisLabel: 'Market Share (%)',
)

🎉 Confetti Animations

class ConfettiExample extends StatefulWidget {
  @override
  _ConfettiExampleState createState() => _ConfettiExampleState();
}

class _ConfettiExampleState extends State<ConfettiExample> {
  late ConfettiController _controller;

  @override
  void initState() {
    super.initState();
    _controller = ConfettiController(duration: Duration(seconds: 3));
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Center(
          child: ElevatedButton(
            onPressed: () => _controller.play(),
            child: Text('Celebrate! 🎉'),
          ),
        ),
        Align(
          alignment: Alignment.topCenter,
          child: ConfettiWidget(
            confettiController: _controller,
            blastDirection: pi / 2,
            numberOfParticles: 30,
            colors: [Colors.red, Colors.blue, Colors.green],
          ),
        ),
      ],
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

📊 Professional Charts

CandleStick Chart - Financial Data

CustomCandleStickChart(
  data: [
    CandleStickData(
      date: DateTime(2024, 1, 1),
      open: 100, high: 110, low: 95, close: 105
    ),
  ],
  title: 'Stock Price Analysis',
  bullishColor: Colors.green,
  bearishColor: Colors.red,
)

Waterfall Chart - Flow Analysis

CustomWaterfallChart(
  data: [
    WaterfallData(label: 'Start', value: 100, type: WaterfallType.start),
    WaterfallData(label: 'Sales', value: 25, type: WaterfallType.positive),
    WaterfallData(label: 'Costs', value: -15, type: WaterfallType.negative),
  ],
  title: 'Revenue Flow',
)

🎨 Advanced Customization

Theming and Styling

// Custom theme for all charts
CustomLineChart(
  series: series,
  title: 'Custom Styled Chart',
  backgroundColor: Color(0xFFF8FAFC),
  gridColor: Colors.grey.withAlpha(77),
  textStyle: TextStyle(
    fontSize: 14,
    fontWeight: FontWeight.w600,
    color: Color(0xFF374151),
  ),
  showGrid: true,
  showLegend: true,
)

Interactive Features

• Touch Interactions: Tap to show values and coordinates
• Hover Effects: Visual feedback on user interaction
• Legends: Color-coded legends with customizable positioning
• Tooltips: Dynamic value display on touch
• Zoom & Pan: For charts with large datasets

Responsive Design

• Adaptive Sizing: Charts automatically adjust to screen size
• Horizontal Scrolling: For charts with extensive data
• Aspect Ratio Control: Maintain proper proportions
• Cross-Platform: Consistent appearance across all platforms

📱 Platform Support

Platform	Supported	Version
Android	✅	API 21+
iOS	✅	iOS 12+
Web	✅	All
Windows	✅	All
macOS	✅	10.14+
Linux	✅	All

🔧 Requirements

• Flutter 3.24.0 or higher
• Dart 3.3.0 or higher
• Android: API level 21+
• iOS: iOS 12.0+

📚 Complete Examples

Explore our comprehensive example app featuring:

📊 Chart Categories

• Core Charts: Line, Bar, Pie, Donut charts with full customization
• Advanced Charts: Gantt, Histogram, Bubble, Stacked Bar, Funnel, Gauge
• Specialized Charts: HeatMap, Radar, TreeMap, Pictograph
• Professional Charts: CandleStick, Area, Scatter, Waterfall, BoxPlot, Venn, Trellis
• Animations: Confetti effects with customizable particles

🎯 Interactive Features

• Touch interactions with value display
• Legends and tooltips
• Horizontal scrolling for large datasets
• Responsive design for all screen sizes
• Professional gradient themes

💡 Use Cases

• Business Analytics: Sales trends, performance metrics
• Financial Data: Stock prices, revenue flow
• Project Management: Timeline visualization, resource allocation
• Statistical Analysis: Data distribution, correlation analysis
• User Engagement: Interactive celebrations and feedback

📖 Documentation & Resources

📋 Documentation

• 📚 API Documentation - Complete API reference
• 🔄 Migration Guide - Upgrade instructions
• 💡 Examples - Live examples and demos
• 🚀 Publishing Guide - For contributors

🎓 Learning Resources

• Quick Start: Get up and running in minutes
• Chart Gallery: Visual examples of all chart types
• Best Practices: Guidelines for optimal chart usage
• Performance Tips: Optimize for large datasets
• Customization Guide: Advanced styling and theming

🛠️ Development

• Contributing: Guidelines for contributors
• Testing: Unit and integration test examples
• Architecture: Package structure and design patterns
• Roadmap: Planned features and improvements

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide for details.

📄 License

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

🔗 Links

• pub.dev Package
• GitHub Repository
• Issue Tracker
• Documentation

💡 Support & Community

🤝 Getting Help

• 🐛 Bug Reports: GitHub Issues
• 💬 Questions: GitHub Discussions
• 📧 Direct Contact: Email Support
• 📖 Documentation: Complete Guide

🌟 Show Your Support

If you find this package helpful:

• ⭐ Star the repository on GitHub
• 👍 Like the package on pub.dev
• 🐦 Share on social media
• 💝 Contribute to the project

🚀 Contributing

We welcome contributions! See our Contributing Guide for:

• Code contributions
• Documentation improvements
• Bug reports and feature requests
• Community support

📊 Package Stats