vishnudas-bluefox/material_charts

Material Charts

pub package License

A comprehensive Flutter charting library offering beautiful, animated, and customizable charts with Material Design aesthetics. Docs

🎨 Live Editor & Interactive Documentation

Design charts visually and copy production-ready Flutter code instantly!

Live Editor

Our interactive documentation at materialcharts.netlify.app features:

• 🎯 Visual Chart Designer - Design charts with drag-and-drop interface
• ⚡ Real-Time Code Generation - See Flutter code update as you design
• 📋 Copy-Paste Ready - Production-ready code you can use immediately
• 🔄 Live Code Editor - Edit code and see chart updates instantly
• 🎨 Style Customization - Colors, animations, and styling made easy
• 📱 Responsive Preview - See how your charts look on different screen sizes

No setup required - just open your browser and start designing!

🚀 Try the Live Editor

Table of Contents

• Installation
• Overview
• Available Charts
  • Bar Chart
  • Stacked Bar Chart
  • Line Chart
  • MultiLine Chart
  • Pie Chart
  • Hollow Semi Circle
  • Gantt Chart
  • CandleStick Chart
  • Area Chart
• Best Practices
• Troubleshooting
• Contributing
• Credits

Features

Common Features Across All Charts

• 🎨 Material Design aesthetics
• ✨ Smooth animations with configurable duration and curves
• 📊 Responsive and adaptive layouts
• 🎭 Customizable color schemes
• 💫 Animation completion callbacks
• 📱 Mobile-friendly design
• ♿ Accessibility support

View all features

Installation

Add to your pubspec.yaml:

dependencies:
  material_charts: latest_version

Available Charts

Bar Chart

Beautiful, interactive bar charts for discrete data visualization.

Bar Chart

View Bar Chart documentation

Stacked Bar Chart

Versatile stacked bars for comparative data visualization.

Stacked Bar Chart

View Stacked Bar Chart documentation

Line Chart

Animated line charts for trend visualization.

Line Chart

View Line Chart documentation

MultiLine Chart

Multiple line series with interactive features.

MultiLine Chart

View MultiLine Chart documentation

Pie Chart

Interactive pie/donut charts with customizable segments.

Pie Chart

View Pie Chart documentation

Hollow Semi Circle

Progress indicators in semi-circular format.

Hollow Semi Circle

View Hollow Semi Circle documentation

Gantt Chart

Project timeline visualization with interactive features.

Gantt Chart

View Gantt Chart documentation

CandleStick Chart

Financial data visualization for stock market analysis.

CandleStick Chart

View CandleStick Chart documentation

Area Chart

Quantitative data visualization over continuous intervals.

Area Chart

View Area Chart documentation

Usage Examples

Detailed examples for each chart type are available in the documentation

Best Practices

Responsive Design

• Use flexible widths and heights
• Test on multiple screen sizes
• Implement adaptive layouts

Performance Optimization

• Limit datasets to manageable sizes
• Use appropriate animation durations
• Implement efficient data updates

Accessibility

• Provide clear labels and descriptions
• Maintain proper color contrast
• Support screen readers

Troubleshooting

Common Issues

1. Chart Not Rendering

   • Check data validity
   • Verify widget dimensions
   • Ensure proper parent constraints

2. Animation Issues

   • Verify animation duration settings
   • Check widget lifecycle management

3. Styling Problems

   • Validate style properties
   • Check parent widget constraints
   • Verify color and theme settings

Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to your branch
5. Open a Pull Request

Read our Contributing Guide for detailed information.

Future Charts

Coming soon:

• 🥧 Enhanced Pie Charts
• 📈 Advanced Area Charts
• 🎯 Radar Charts
• 📊 Scatter Plots

License

BSD 3-Clause License

Copyright (c) 2024, Material Charts
All rights reserved.

Support

• 📚 Documentation
• 💬 GitHub Issues
• 📧 [Email Support](mailto:vishnudas956783@gmail.com)
• your donations are important for our future projects

donate:

if you like what i do, maybe consider buying me a coffee/tea 🥺👉👈

Buy Me A Coffee

Credits

Developed with 💙 by vishnudas-bluefox

Special thanks to all contributors!