Animated radar chart for Flutter

flutter radar chart

animated radar chart for flutter inspired by the python graph gallery.

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.

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
• [x] animations on render
• [ ] integration testing
• [ ] responsive design
• [ ] legends

acknowledgements

• the python graph gallery is a great resource.
• kudos to spider_chart for inspiring me to leverage flutter’s custompainter to build the radar chart.