Basic radar chart for Flutter

Overview

flutter_radar_chart

Animated radar chart for Flutter inspired by The Python Graph Gallery (https://python-graph-gallery.com/radar-chart/).

Follow the instructions on pub to install this package.

Example

screenshot

Usage

Basic usage of radar chart requires three pieces of data:

  • ticks - Defines the numerical axis for the chart. Each tick generates an outline. Currently, each feature is plotted using the numerical range define by the ticks.
  • features - Defines the numerical variables for each individual in the chart. There is no limit to the number of features.
  • data - List of data points used to construct each individual in the chart. The number of data points must match the number of features. There is no limit to the number of individuals in the chart; however, multiple entities might cause the graph to become unreadable.
RadarChart.light(
    ticks: ticks,
    features: features,
    data: data,
),

A full example (as seen in the screenshots) can be found in example/lib/main.dart

Customizability

Most of the customizability of the graph is a work in progress, but here's some of the features of the chart:

  • Animations! Trying to add some life to the chart. Animation is currently triggered whenever the widget is updated (didUpdateWidget). Animations are currently enabled by default.
  • Number of features: As shown in the example, the radar chart will adjust to the number of given variables. More work is needed to ensure the chart doesn't explode when given invalid data.
  • Reverse axis: Reverses the axis range so that the min value starts at the graph outline.
  • Dark mode: Simple factory that showcases the color customizability of the chart.
  • Polygon sides: Ability to use flat polygon borders instead of a circular border.

screenshot

Future Work Ideas

There's a few more areas of work that I'd love to get around to building. I will eventually move these items over to issues for better tracking.

  • Option for round corners
  • Animations on render
  • Integration testing
  • Responsive design
  • Legends

Acknowledgements

Comments
  • Package not working

    Package not working

    flutter_radar_chart package is not working, not recognized. Added to pubspec.yaml dependencies: flutter_radar_chart: ^0.2.1 - OK Added import 'package:flutter_radar_chart/flutter_radar_chart.dart'; - ERROR. not recognized.

    this is my flutter doctor results: Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 2.10.3, on macOS 12.2.1 21D62 darwin-x64, locale en-IL) [✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0) [✓] Xcode - develop for iOS and macOS (Xcode 13.3) [✓] Chrome - develop for the web [✓] Android Studio (version 2021.1) [✓] Connected device (3 available) [✓] HTTP Host Availability

    • No issues found!

    opened by CobyReshef 3
  • Measures alignment - Sticking them to the axis edge

    Measures alignment - Sticking them to the axis edge

    Hello, How can I configure the labels (measures) on the chart so they stick to the axis edges? As you can see in the image, the labels on the left have a big blank space, while the ones at the center and at the right are "sticked" to the axis edge.

    image

    opened by ghost 3
  • float and double datas are not supported

    float and double datas are not supported

    While we were using this module, we found out that when we give the float data it threw errors, and we can see that the dataset is defined as list<list>, it is very weird to not allow floats and doubles in data graphs, please fix this problem, thanks

    opened by xiaomiao-fong 2
  • Polygon background support added

    Polygon background support added

    • Non-breaking support for polygon background shapes added
    • New optional property sides added for configuring polygon sides

    property | value type | default value | notes | ----| ----- | ----- | ----| sides | int | 0 | Value less than 3 will generate the default circle background

    opened by jalakoo 2
  • Exceptions

    Exceptions

    I get the following exceptions when I use radar chart.

    _RadarChartState#c3338(ticker active) was disposed with an active Ticker.

    'package:flutter/src/widgets/framework.dart': Failed assertion: line 3867 pos 12: '_debugLifecycleState != _ElementLifecycle.defunct': is not true.

    opened by deadsoul44 2
  • fix bug 'animationController is not disposed'

    fix bug 'animationController is not disposed'

    Fix bug. When RaderChart is disposed, flutter logs outputs messages.

    I/flutter (18925): The following assertion was thrown while finalizing the widget tree: I/flutter (18925): _RadarChartState#14365(ticker active) was disposed with an active Ticker. I/flutter (18925): _RadarChartState created a Ticker via its SingleTickerProviderStateMixin, but at the time dispose() I/flutter (18925): was called on the mixin, that Ticker was still active. The Ticker must be disposed before calling I/flutter (18925): super.dispose(). I/flutter (18925): Tickers used by AnimationControllers should be disposed by calling dispose() on the I/flutter (18925): AnimationController itself. Otherwise, the ticker will leak.

    So I send pullrequest to dispose animationController. Please pull this.

    opened by moegiillo 1
  • Fixed bug center value error when reverse axis

    Fixed bug center value error when reverse axis

    When reverse axis, the central point dose not label as last value in ticks, but data point dose labeld in right position.

    Old version: https://i.imgur.com/tfdfsQy.png This version: https://i.imgur.com/HPgXVqR.png

    I use same example code from this project.

    opened by TMineCola 0
  • PersistedPhysicalShape: is in an unexpected state

    PersistedPhysicalShape: is in an unexpected state

    Finding this exception being thrown in web. Another exception was thrown: PersistedPhysicalShape: is in an unexpected state.

    Flutter run console says it's on line 236 of flutter_radar_chart.dart

    [✓] Flutter (Channel beta, v1.15.17, on Mac OS X 10.15.3 19D76, locale en-US) • Flutter version 1.15.17 at /Users/jasonspick/Projects/Web/flutter • Framework revision 2294d75bfa (2 weeks ago), 2020-03-07 00:28:38 +0900 • Engine revision 5aff311948 • Dart version 2.8.0 (build 2.8.0-dev.12.0 9983424a3c)

    flutter_radar_chart: 0.1.3

    opened by jasonspick 0
  • [Enhancement] Anchoring of labels

    [Enhancement] Anchoring of labels

    It would be nice to have possibility to select anchor and offset captions, so I can center it over "axis". Additional interesting thing would be to rotate captions, so I could achieve effect as shown on attachment.

    Screenshot_1645614338

    opened by thetoster 2
Owner
Dan Panaite
Dan Panaite
A powerful 🚀 Android chart view / graph view library, supporting line- bar- pie- radar- bubble- and candlestick charts as well as scaling, panning and animations.

⚡ A powerful & easy to use chart library for Android ⚡ Charts is the iOS version of this library Table of Contents Quick Start Gradle Maven Documentat

Philipp Jahoda 36k Dec 28, 2022
Sliver bar chart - A package that supports Bar Chart in a Flutter Sliver

Sliver bar chart - A package that supports Bar Chart in a Flutter Sliver. This Package allows us to add Bar Chart in Sliver and sets a Bar Chart as a Header on Slivers Scroll.

MindInventory 19 Oct 11, 2022
kg_charts icon library. At present, there are only radar charts

kg_charts icon library. At present, there are only radar charts. Other types of charts may be added later

zhonghua 10 Oct 25, 2022
A beautiful bezier line chart widget for flutter that is highly interactive and configurable.

Bezier Chart A beautiful bezier line chart widget for flutter that is highly interactive and configurable. Features Multi bezier lines Allow numbers a

Aeyrium 428 Dec 21, 2022
A scrollable time chart in Flutter.

time_chart An amazing time chart in Flutter. Chart Types TimeChart AmountChart Getting Started 1 - Depend on it Add it to your package's pubspec.yaml

Minseong Kim 26 Oct 28, 2022
This project is used to introduce the use of flutter canvas, include draw chart, clip image's path and draw progress indicator.

flutter_canvas This project is used to introduce the use of flutter canvas, include draw chart, clip image's path and draw progress indicator. draw ch

YouXianMing 9 Oct 27, 2022
Maybe this is the best k chart in Flutter.Support drag,scale,long press,fling.And easy to use.

k_chart Maybe this is the best k chart in Flutter.Support drag,scale,long press,fling.And easy to use. display image gif Getting Started Install depen

OpenFlutter 342 Jan 9, 2023
Flutter chart library contains depth charts supporting various indicators and zooming

flutter_k_chart 介绍 一个仿火币的flutter图表库包含深度图,支持各种指标及放大缩小、平移等操作 webdemo演示 Demo v0.1.0:下载 APK 演示 简单用例 1.在 pubspec.yaml 中添加依赖 本项目数据来自火币openApi,火币的接口可能需要翻墙,接口

gwh 259 Dec 30, 2022
Animated line chart for flutter

fl_animated_linechart An animated chart library for flutter. Support for datetime axis Multiple y axis, supporting different units Highlight selection

null 51 Sep 25, 2022
Flutter Pie chart with animation

Pie Chart This Flutter package provides a Pie Chart Widget with cool animation. Live Demo: https://apgapg.github.io/pie_chart/ ?? Try LIVE Demo Live D

Ayush P Gupta 161 Dec 24, 2022
A simple radial chart for Flutter

A simple radial chart for Flutter

null 2 Jun 2, 2022
A simple candlestick chart for flutter. Supports smooth scroll and zoom

simple_candlestick_chart A simple candlestick chart for flutter. Supports smooth

7c00 14 Oct 17, 2022
Flutter heatmap calendar inspired by github contribution chart. [traditional mode / calendar mode]

Flutter Heatmap Flutter heatmap calendar inspired by github contribution chart.

Kim Seung Hwan 1 Dec 26, 2021
📆 Flutter heatmap calendar inspired by github contribution chart.

Flutter Heatmap Calendar Flutter Heatmap Calendar inspired by github contribution chart. Flutter Heatmap Calendar provides traditional contribution ch

Kim Seung Hwan 22 Jan 1, 2023
Stores and manages the data of your week expenses with a chart

personal_expenses_app A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you st

null 1 Dec 26, 2021
Charts Library for Flutter, written in Dart with Flutter.

Table of Contents New in the current release Illustration of the new "iterative auto layout" feature Autolayout step 1 Autolayout step 2 Autolayout st

Milan Zimmermann 225 Dec 25, 2022
Animated radial and pie charts for Flutter

Flutter Circular Chart A library for creating animated circular chart widgets with Flutter, inspired by Zero to One with Flutter. Overview Create easi

Victor Choueiri 387 Dec 26, 2022
Beautiful sparkline charts for Flutter

flutter_sparkline Beautiful sparkline charts for Flutter. Installation Install the latest version from pub. Quick Start Import the package, create a S

Victor Choueiri 255 Dec 21, 2022
Elegant OHLC Candlestick and Trade Volume charts for @Flutter

flutter_candlesticks Elegant OHLC Candlestick and Trade Volume charts for Flutter Usage Install for Flutter with pub. Property Description data Requir

Trent Piercy 402 Dec 21, 2022