Giter Club home page Giter Club logo

pie_chart's Introduction

Pie Chart Cirrus CI - Base Branch Build Status GitHub stars Twitter Follow GitHub last commit Website shields.ioOpen Source Love

This Flutter package provides a Pie Chart Widget with cool animation.

Live Demo: https://apgapg.github.io/pie_chart/

๐Ÿ’ป Installation

In the dependencies: section of your pubspec.yaml, add the following line:

Version

dependencies:
  pie_chart: <latest version>

โ” Usage

Import this class

import 'package:pie_chart/pie_chart.dart';

Usage is simple. Pie Chart is a widget and it just need a Map<String,double> as its data input.

PieChart

Map<String, double> dataMap = new Map();
dataMap.putIfAbsent("Flutter", () => 5);
dataMap.putIfAbsent("React", () => 3);
dataMap.putIfAbsent("Xamarin", () => 2);
dataMap.putIfAbsent("Ionic", () => 2);

- Simple Implementation

PieChart(dataMap: dataMap) 

- Full Implementation

PieChart(
        dataMap: dataMap,
        animationDuration: Duration(milliseconds: 800),
        chartLegendSpacing: 32.0,
        chartRadius: MediaQuery.of(context).size.width / 2.7,
        showChartValuesInPercentage: true,
        showChartValues: true,
        showChartValuesOutside: false,
        chartValueBackgroundColor: Colors.grey[200],
        colorList: colorList,
        showLegends: true,
        legendPosition: LegendPosition.right,
        decimalPlaces: 1,
        showChartValueLabel: true,
        initialAngle: 0,
        chartValueStyle: defaultChartValueStyle.copyWith(
          color: Colors.blueGrey[900].withOpacity(0.9),
        ),
        chartType: ChartType.disc,
    )

Change legend position with 'legendPosition'

PieChart PieChart PieChart PieChart

Change Chart shape to ring

chartType: ChartType.ring,

PieChart

chartType: ChartType.ring,
showChartValuesOutside: true,

PieChart

Issues

Title Status Assignee Body
Added strokeWidth for ring style charts โ›” Just added the strokeWidth for Ring charts with a default width of 20.0, which is was it was set to previously.
Also used the flutter formatter which seems to have removed a couple of spaces.
How to use a Observer on it? โœณ๏ธ I need my chart as a Observable Widget but i dont know where to put the observer. I'm using Mobx to manage the state.
Default color for empty pie chart โœณ๏ธ Would it be possible to add a feature, when passing a map with only 0 values to display as a full chart but with an default color, e.g. light grey?

Other question, when can we expect the update with the number in the middle to be officially released? I am only waiting for that feature.
[ImgBot] Optimize images โ›” ## Beep boop. Your images are optimized!

Your image file size has been reduced by 29% ๐ŸŽ‰
...
Percentage from 0-10% / lesser percentage is not displaying โœณ๏ธ Hi

Its a very good library, but I am stuck where I will have a percentage of value is less than 10 %
...
issue with overlapping see screen shot โœณ๏ธ Screenshot_20200323-202028__01
Pie chart show only half โœณ๏ธ Pie chart only show half if dataMap consists of only one value.

```
...
Error: The method 'getColor' isn't defined for the class 'PieChartPainter'. โ›” I get this error

```
...
Change label position โ›” The label now is displayed vertically. It is possible to displayed horizontally?

I want change the legend position to top, and displayed the label horizontally.
...
How to place labels completely outside of the ring? โœณ๏ธ Hi Bro, Is there a way we can place labels completely outside the ring like the below?

download (1)
...
adding Format data functionality โ›” this functionality allows to format the data how you want, I used this to show a pie chart with comparing the times I spent doing things in each category with my timer, so when showing the data, instead of show the absolute number representing the time in minutes, or percentage, I could transform the data that was 90 to 01:30, or 60 to 01:00, and so on....
Add center text option โ›” This PR adds center text support #24

Ring
...
Gradient โœณ๏ธ Is there anyways to add a gradient to the colors?
How to add text in the center of the ring? โ›” Is it possible?
A few issues since upgrading from 2.0.0 โœณ๏ธ Hi!

A few issues since upgrading from 2.0.0
...
showLegends = false causes exception โ›” Hi, is it possible to hide legends? I am displaying pie chart inside a row widget and I tried showLegends = false but i am getting 'Row's children must not contain any null value, but a null value was found at index 1' exception. Any idea?
Add click support โœณ๏ธ Would be great if you could click on a piece of the pie or on a label and receive a notification of which of the values the click corresponds to.
Add ring shape pie chart support โ›” Fixes #19 This PR adds support for 'chartType' parameter with values 'ChartType.ring' or 'ChartType.disc'.
This will give two different chart shapes as name suggests.
Update example and README
Feature: Pie chart as ring โ›”
[Feature Request] Column View โ›” Hi, absolutely loving this plugin for my workout app. Got the visual breakdown of what they train in like 5 minutes.

A nice feature might be a column view, where the pie chart is on top and the legend is below. This would allow each to be larger so I could use bigger fonts inside the pie chat.
Feature legend position โ›” #2 This PR adds a new property legendPosition in the widget, which enables positioning legend around the pie chart.

legendPosition: LegendPosition.right
...
Feature legend position โ›” #2 This PR adds a new property legendPosition in the widget, which enables positioning legend around the pie chart.

legendPosition: LegendPosition.right
...
Code restructure โ›”
Can navigate to other pages when tap on labels? โ›”
Enable selecting piechart slice starting angle โ›” First thank you for your work. This is the easiest to use flutter chart plugin on pub!

Currently the piechart starts animating from the right side of the circle (from 3 o'clock).
...
chart filter option โ›” Hello
I need a pie chart decimal values so add [filterChartValues]. If how much you want to set values.

...
allow to configure initialAngle โ›” * allow to configure initialAngle
* set initialAngle to always start at 12 o'clock
toDouble was Called on null โ›” `I/flutter (30917): โ•โ•โ•ก EXCEPTION CAUGHT BY WIDGETS LIBRARY โ•žโ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•
I/flutter (30917): The following NoSuchMethodError was thrown building PieChart(dirty, state:
I/flutter (30917): _PieChartState#f7d87(ticker active)):
...
Update README.md โ›” proposal to update the dataMap.
because it was confusing and and induced errors.
Enhancement: Add option for outside labels โ›” As of now if there are a lot of segments in the chart the label values (in the pie) are cut by one another.
It would be great if there was an option to have outside labels something like:
https://google.github.io/charts/flutter/example/pie_charts/outside_label

โญ My Flutter Packages

  • json_table GitHub stars Create Flutter Json Table from json map directly.
  • avatar_glow GitHub stars Flutter Avatar Glow Widget with glowing animation.
  • search_widget GitHub stars Flutter Search Widget for selecting an option from list.
  • animating_location_pin GitHub stars Flutter Animating Location Pin Widget providing Animating Location Pin Widget which can be used while fetching device location.

โญ My Flutter Apps

๐Ÿ‘ Contribution

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -m 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.