{"id":13551128,"url":"https://github.com/xqwzts/flutter_circular_chart","last_synced_at":"2025-10-23T07:03:23.489Z","repository":{"id":37663847,"uuid":"109338747","full_name":"xqwzts/flutter_circular_chart","owner":"xqwzts","description":"Animated radial and pie charts for Flutter","archived":false,"fork":false,"pushed_at":"2024-06-13T12:04:29.000Z","size":4376,"stargazers_count":403,"open_issues_count":23,"forks_count":142,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-12-20T03:03:27.589Z","etag":null,"topics":["charting","flutter","library"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xqwzts.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-03T01:46:04.000Z","updated_at":"2024-11-12T02:30:28.000Z","dependencies_parsed_at":"2024-08-01T12:18:52.537Z","dependency_job_id":"5942ff82-3868-4ee2-876d-b5359751471d","html_url":"https://github.com/xqwzts/flutter_circular_chart","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xqwzts%2Fflutter_circular_chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xqwzts%2Fflutter_circular_chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xqwzts%2Fflutter_circular_chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xqwzts%2Fflutter_circular_chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xqwzts","download_url":"https://codeload.github.com/xqwzts/flutter_circular_chart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246922066,"owners_count":20855341,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["charting","flutter","library"],"created_at":"2024-08-01T12:01:42.829Z","updated_at":"2025-10-23T07:03:18.455Z","avatar_url":"https://github.com/xqwzts.png","language":"Dart","readme":"[![pub package](https://img.shields.io/pub/v/flutter_circular_chart.svg)](https://pub.dartlang.org/packages/flutter_circular_chart)\n\n# Flutter Circular Chart\n\nA 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).\n\n## Overview\n\nCreate easily animated pie charts and radial charts by providing them with data objects they can plot into charts and animate between.\n\n![animated_random_radial_chart](screenshots/animated_random_radial_chart_example.gif)\n\n![animated pie chart](screenshots/animated_pie_chart_example.gif)\n![animated radial chart](screenshots/animated_radial_chart_example_label.gif)\n\nCheck the examples folder for the source code for the above screenshots.\n\n## Contents:\n- [Installation](#installation)\n- [Getting Started](#getting-started)\n- [Customization](#customization)\n- [Details](#details)\n  - [Chart data entries](#chart-data-entries)\n\n## Installation\n\nInstall the latest version [from pub](https://pub.dartlang.org/packages/flutter_circular_chart#-installing-tab-).\n\n## Getting Started\n\nImport the package:\n\n```dart\nimport 'package:flutter_circular_chart/flutter_circular_chart.dart';\n```\n\nCreate a [GlobalKey](https://docs.flutter.io/flutter/widgets/GlobalKey-class.html) to be able to access the chart and update its data:\n\n```dart\nfinal GlobalKey\u003cAnimatedCircularChartState\u003e _chartKey = new GlobalKey\u003cAnimatedCircularChartState\u003e();\n```\n\nCreate chart data entry objects:\n\n```dart\nList\u003cCircularStackEntry\u003e data = \u003cCircularStackEntry\u003e[\n  new CircularStackEntry(\n    \u003cCircularSegmentEntry\u003e[\n      new CircularSegmentEntry(500.0, Colors.red[200], rankKey: 'Q1'),\n      new CircularSegmentEntry(1000.0, Colors.green[200], rankKey: 'Q2'),\n      new CircularSegmentEntry(2000.0, Colors.blue[200], rankKey: 'Q3'),\n      new CircularSegmentEntry(1000.0, Colors.yellow[200], rankKey: 'Q4'),\n    ],\n    rankKey: 'Quarterly Profits',\n  ),\n];\n```\n\nCreate an `AnimatedCircularChart`, passing it the `_chartKey` and initial `data`:\n\n```dart\n@override\nWidget build(BuildContext context) {\n  return new AnimatedCircularChart(\n    key: _chartKey,\n    size: const Size(300.0, 300.0),\n    initialChartData: data,\n    chartType: CircularChartType.Pie,\n  );\n}\n```\n\nCall `updateData` to animate the chart:\n\n```dart\nvoid _cycleSamples() {\n  List\u003cCircularStackEntry\u003e nextData = \u003cCircularStackEntry\u003e[\n    new CircularStackEntry(\n      \u003cCircularSegmentEntry\u003e[\n        new CircularSegmentEntry(1500.0, Colors.red[200], rankKey: 'Q1'),\n        new CircularSegmentEntry(750.0, Colors.green[200], rankKey: 'Q2'),\n        new CircularSegmentEntry(2000.0, Colors.blue[200], rankKey: 'Q3'),\n        new CircularSegmentEntry(1000.0, Colors.yellow[200], rankKey: 'Q4'),\n      ],\n      rankKey: 'Quarterly Profits',\n    ),\n  ];\n  setState(() {\n    _chartKey.currentState.updateData(nextData);\n  });\n}\n```\n\n## Customization\n\n### Hole Label:\n\n| Property   | Default                           |\n|------------|:---------------------------------:|\n| holeLabel  | null                              |\n| labelStyle | Theme.of(context).textTheme.body2 |\n\nExample:\n\n```dart\nnew AnimatedCircularChart(\n  key: _chartKey,\n  size: _chartSize,\n  initialChartData: \u003cCircularStackEntry\u003e[\n    new CircularStackEntry(\n      \u003cCircularSegmentEntry\u003e[\n        new CircularSegmentEntry(\n          33.33,\n          Colors.blue[400],\n          rankKey: 'completed',\n        ),\n        new CircularSegmentEntry(\n          66.67,\n          Colors.blueGrey[600],\n          rankKey: 'remaining',\n        ),\n      ],\n      rankKey: 'progress',\n    ),\n  ],\n  chartType: CircularChartType.Radial,\n  percentageValues: true,\n  holeLabel: '1/3',\n  labelStyle: new TextStyle(\n    color: Colors.blueGrey[600],\n    fontWeight: FontWeight.bold,\n    fontSize: 24.0,\n  ),\n)\n```\n\n![hole label example screenshot](screenshots/hole_label_example.png)\n\n---\n\n### Segment Edge Style:\n\n| Property   | Default               |\n|------------|:---------------------:|\n| edgeStyle  | SegmentEdgeStyle.flat |\n\n| SegmentEdgeStyle | Description                                |\n|:----------------:|--------------------------------------------|\n| flat (default)   | Segments begin and end with a flat edge.   |\n| round            | Segments begin and end with a semi-circle. |\n\nExample:\n\n```dart\nnew AnimatedCircularChart(\n  key: _chartKey,\n  size: _chartSize,\n  initialChartData: \u003cCircularStackEntry\u003e[\n    new CircularStackEntry(\n      \u003cCircularSegmentEntry\u003e[\n        new CircularSegmentEntry(\n          33.33,\n          Colors.blue[400],\n          rankKey: 'completed',\n        ),\n        new CircularSegmentEntry(\n          66.67,\n          Colors.blueGrey[600],\n          rankKey: 'remaining',\n        ),\n      ],\n      rankKey: 'progress',\n    ),\n  ],\n  chartType: CircularChartType.Radial,\n  edgeStyle: SegmentEdgeStyle.round,\n  percentageValues: true,\n)\n```\n\n![round segment edge example screenshot](screenshots/segment_edge_round_example.png)\n\n## Details\n\n### Chart data entries:\n\nCharts expect a list of `CircularStackEntry` objects containing the data they need to be drawn.\n\nEach `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.\n\nRadial charts with multiple `CircularStackEntry`s will display them as concentric circles.\n\nEach `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.\n\n\n\n","funding_links":[],"categories":["组件","Dart","Components","Charts [🔝](#readme)"],"sub_categories":["图表","Map","Charts"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxqwzts%2Fflutter_circular_chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxqwzts%2Fflutter_circular_chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxqwzts%2Fflutter_circular_chart/lists"}