https://github.com/xqwzts/flutter_circular_chart
Animated radial and pie charts for Flutter
https://github.com/xqwzts/flutter_circular_chart
charting flutter library
Last synced: 18 days ago
JSON representation
Animated radial and pie charts for Flutter
- Host: GitHub
- URL: https://github.com/xqwzts/flutter_circular_chart
- Owner: xqwzts
- License: mit
- Created: 2017-11-03T01:46:04.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-06-13T12:04:29.000Z (10 months ago)
- Last Synced: 2024-12-20T03:03:27.589Z (4 months ago)
- Topics: charting, flutter, library
- Language: Dart
- Homepage:
- Size: 4.17 MB
- Stars: 403
- Watchers: 11
- Forks: 142
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-flutter - Circular Chart - Animated radial and pie charts by [Victor Choueiri](https://github.com/xqwzts). (Components / Map)
README
[](https://pub.dartlang.org/packages/flutter_circular_chart)
# Flutter Circular Chart
A library for creating animated circular chart widgets with Flutter, inspired by [Zero to One with Flutter](https://medium.com/dartlang/zero-to-one-with-flutter-43b13fd7b354).
## Overview
Create easily animated pie charts and radial charts by providing them with data objects they can plot into charts and animate between.
Check the examples folder for the source code for the above screenshots.
## Contents:
- [Installation](#installation)
- [Getting Started](#getting-started)
- [Customization](#customization)
- [Details](#details)
- [Chart data entries](#chart-data-entries)
## Installation
Install the latest version [from pub](https://pub.dartlang.org/packages/flutter_circular_chart#-installing-tab-).
## Getting Started
Import the package:
```dart
import 'package:flutter_circular_chart/flutter_circular_chart.dart';
```
Create a [GlobalKey](https://docs.flutter.io/flutter/widgets/GlobalKey-class.html) to be able to access the chart and update its data:
```dart
final GlobalKey _chartKey = new GlobalKey();
```
Create chart data entry objects:
```dart
List data = [
new CircularStackEntry(
[
new CircularSegmentEntry(500.0, Colors.red[200], rankKey: 'Q1'),
new CircularSegmentEntry(1000.0, Colors.green[200], rankKey: 'Q2'),
new CircularSegmentEntry(2000.0, Colors.blue[200], rankKey: 'Q3'),
new CircularSegmentEntry(1000.0, Colors.yellow[200], rankKey: 'Q4'),
],
rankKey: 'Quarterly Profits',
),
];
```
Create an `AnimatedCircularChart`, passing it the `_chartKey` and initial `data`:
```dart
@override
Widget build(BuildContext context) {
return new AnimatedCircularChart(
key: _chartKey,
size: const Size(300.0, 300.0),
initialChartData: data,
chartType: CircularChartType.Pie,
);
}
```
Call `updateData` to animate the chart:
```dart
void _cycleSamples() {
List nextData = [
new CircularStackEntry(
[
new CircularSegmentEntry(1500.0, Colors.red[200], rankKey: 'Q1'),
new CircularSegmentEntry(750.0, Colors.green[200], rankKey: 'Q2'),
new CircularSegmentEntry(2000.0, Colors.blue[200], rankKey: 'Q3'),
new CircularSegmentEntry(1000.0, Colors.yellow[200], rankKey: 'Q4'),
],
rankKey: 'Quarterly Profits',
),
];
setState(() {
_chartKey.currentState.updateData(nextData);
});
}
```
## Customization
### Hole Label:
| Property | Default |
|------------|:---------------------------------:|
| holeLabel | null |
| labelStyle | Theme.of(context).textTheme.body2 |
Example:
```dart
new AnimatedCircularChart(
key: _chartKey,
size: _chartSize,
initialChartData: [
new CircularStackEntry(
[
new CircularSegmentEntry(
33.33,
Colors.blue[400],
rankKey: 'completed',
),
new CircularSegmentEntry(
66.67,
Colors.blueGrey[600],
rankKey: 'remaining',
),
],
rankKey: 'progress',
),
],
chartType: CircularChartType.Radial,
percentageValues: true,
holeLabel: '1/3',
labelStyle: new TextStyle(
color: Colors.blueGrey[600],
fontWeight: FontWeight.bold,
fontSize: 24.0,
),
)
```
---
### Segment Edge Style:
| Property | Default |
|------------|:---------------------:|
| edgeStyle | SegmentEdgeStyle.flat |
| SegmentEdgeStyle | Description |
|:----------------:|--------------------------------------------|
| flat (default) | Segments begin and end with a flat edge. |
| round | Segments begin and end with a semi-circle. |
Example:
```dart
new AnimatedCircularChart(
key: _chartKey,
size: _chartSize,
initialChartData: [
new CircularStackEntry(
[
new CircularSegmentEntry(
33.33,
Colors.blue[400],
rankKey: 'completed',
),
new CircularSegmentEntry(
66.67,
Colors.blueGrey[600],
rankKey: 'remaining',
),
],
rankKey: 'progress',
),
],
chartType: CircularChartType.Radial,
edgeStyle: SegmentEdgeStyle.round,
percentageValues: true,
)
```
## Details
### Chart data entries:
Charts expect a list of `CircularStackEntry` objects containing the data they need to be drawn.
Each `CircularStackEntry` corresponds to a complete circle in the chart. For radial charts that is one of the rings, for pie charts it is the whole pie.
Radial charts with multiple `CircularStackEntry`s will display them as concentric circles.
Each `CircularStackEntry` is composed of multiple `CircularSegmentEntry`s containing the value of a data point. In radial charts a segment corresponds to an arc segment of the current ring, for pie charts it is an individual slice.