material_charts

KO | EN

gitlite — search

#python #react #llm #android #rust #nodejs #windows #awesome #cli #kubernetes #vue #awesome-list #security #open-source

material_charts

(★ 27)

Docs: https://materialcharts.netlify.app/

material_charts Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Material Charts

[![pub package](https://img.shields.io/pub/v/material_charts.svg)](https://pub.dev/packages/material_charts)
[![License](https://img.shields.io/badge/License-BSD_3--Clause-blue.svg)](https://opensource.org/licenses/BSD-3-Clause)

A comprehensive Flutter charting library offering beautiful, animated, and customizable charts with Material Design aesthetics. [Docs](https://materialcharts.netlify.app/)

## 🎨 Live Editor & Interactive Documentation

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

![Live Editor](https://raw.githubusercontent.com/vishnudas-bluefox/material_charts/refs/heads/master/live_editor.png)

Our interactive documentation at [materialcharts.netlify.app](https://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](https://materialcharts.netlify.app/)

## Table of Contents

- [Installation](https://materialcharts.netlify.app/)
- [Overview](https://materialcharts.netlify.app/)
- [Available Charts](https://materialcharts.netlify.app/)
  - [Bar Chart](https://materialcharts.netlify.app/)
  - [Stacked Bar Chart](https://materialcharts.netlify.app/)
  - [Line Chart](https://materialcharts.netlify.app/)
  - [MultiLine Chart](https://materialcharts.netlify.app/)
  - [Pie Chart](https://materialcharts.netlify.app/)
  - [Hollow Semi Circle](https://materialcharts.netlify.app/)
  - [Gantt Chart](https://materialcharts.netlify.app/)
  - [CandleStick Chart](https://materialcharts.netlify.app/)
  - [Area Chart](https://materialcharts.netlify.app/)
- [Best Practices](https://materialcharts.netlify.app/)
- [Troubleshooting](https://materialcharts.netlify.app/)
- [Contributing](https://materialcharts.netlify.app/)
- [Credits](https://github.com/vishnudas-bluefox/material_charts/graphs/contributors)

## 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](https://materialcharts.netlify.app/)

## Installation

Add to your `pubspec.yaml`:

```yaml
dependencies:
  material_charts: latest_version
```

## Available Charts

### Bar Chart

Beautiful, interactive bar charts for discrete data visualization.

![Bar Chart](https://raw.githubusercontent.com/vishnudas-bluefox/material_charts/refs/heads/master/images/bar_chart.gif)

[View Bar Chart documentation](https://materialcharts.netlify.app/)

### Stacked Bar Chart

Versatile stacked bars for comparative data visualization.

![Stacked Bar Chart](https://raw.githubusercontent.com/vishnudas-bluefox/material_charts/refs/heads/master/images/stacked_bar_chart.gif)

[View Stacked Bar Chart documentation](https://materialcharts.netlify.app/)

### Line Chart

Animated line charts for trend visualization.

![Line Chart](https://raw.githubusercontent.com/vishnudas-bluefox/material_charts/refs/heads/master/images/line_chart.gif)

[View Line Chart documentation](https://materialcharts.netlify.app/)

### MultiLine Chart

Multiple line series with interactive features.

![MultiLine Chart](https://raw.githubusercontent.com/vishnudas-bluefox/material_charts/refs/heads/master/images/multi_line_chart.gif)

[View MultiLine Chart documentation](https://materialcharts.netlify.app/)

### Pie Chart

Interactive pie/donut charts with customizable segments.

![Pie Chart](https://raw.githubusercontent.com/vishnudas-bluefox/material_charts/refs/heads/master/images/pie_chart.gif)

[View Pie Chart documentation](https://materialcharts.netlify.app/)

### Hollow Semi Circle

Progress indicators in semi-circular format.

![Hollow Semi Circle](https://raw.githubusercontent.com/vishnudas-bluefox/material_charts/refs/heads/master/images/hoolow_semi_circle.gif)

[View Hollow Semi Circle documentation](https://materialcharts.netlify.app/)

### Gantt Chart

Project timeline visualization with interactive features.

![Gantt Chart](https://raw.githubusercontent.com/vishnudas-bluefox/material_charts/refs/heads/master/images/gant_chart.gif)

[View Gantt Chart documentation](https://materialcharts.netlify.app/)

### CandleStick Chart

Financial data visualization for stock market analysis.

![CandleStick Chart](https://raw.githubusercontent.com/vishnudas-bluefox/material_charts/refs/heads/master/images/candle_chart.gif)

[View CandleStick Chart documentation](https://materialcharts.netlify.app/)

### Area Chart

Quantitative data visualization over continuous intervals.

![Area Chart](https://raw.githubusercontent.com/vishnudas-bluefox/material_charts/refs/heads/master/images/area_chart.gif)

[View Area Chart documentation](https://materialcharts.netlify.app/)

## Usage Examples

[Detailed examples for each chart type are available in the documentation](https://pub.dev/documentation/material_charts/latest/)

## 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](CONTRIBUTING.md) for detailed information.

## Future Charts

Coming soon:

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

## License

```
BSD 3-Clause License

## Support

- 📚 [Documentation](https://materialcharts.netlify.app/)
- 💬 [GitHub Issues](https://github.com/vishnudas-bluefox/material_charts/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 🥺👉👈

## Credits

Developed with 💙 by [vishnudas-bluefox](https://github.com/vishnudas-bluefox)

Special thanks to all [contributors](https://github.com/vishnudas-bluefox/material_charts/graphs/contributors)!

material_charts

material_charts Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

material_charts

material_charts Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README