Radial Charts #

A collection of customizable radial chart widgets for Flutter — RadialRatingChart and RoundedDonutChart. Display ratings and data across multiple categories with variable radius segments, smooth Bezier-curved donut charts, customizable legends, and emoji support.

Features #

✨ Variable Radius Segments - Each category's segment radius represents its rating value

🍩 Rounded Donut Chart - Donut chart with smooth, rounded segment edges using Bezier curves

🎨 Highly Customizable - Colors, grid levels, opacity, borders, center text, and more

📦 Predefined Categories - Life balance, skills, product features templates with emojis

📊 Unified Legend System - Shared legend architecture with three styles (circle, rectangle, roundedRectangle)

😀 Emoji Support - Add emojis to categories and display them in legends

🚀 Zero Dependencies - Pure Flutter implementation using CustomPainter

⚡ Performance Optimized - Efficient rendering with smooth animations

Demo #

Radial Rating Chart Interactive rating chart with customizable categories, legends, and emoji support

Rounded Donut Chart Smooth rounded edges with Bezier curves, center text, and flexible legend styles

💡 Want to explore all settings interactively? Run the example app — it includes sliders, color pickers, and live preview for every chart parameter.

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  radial_charts: ^0.2.2

Then run:

flutter pub get

Usage #

Basic Example #

import 'package:flutter/material.dart';
import 'package:radial_charts/radial_charts.dart';

RadialRatingChart(
  data: [
    CategoryData(
      category: ChartCategory(
        id: 'health',
        name: 'Health',
        color: Colors.green,
        emoji: '🏃',
      ),
      rating: 8,
    ),
    CategoryData(
      category: ChartCategory(
        id: 'career',
        name: 'Career',
        color: Colors.blue,
        emoji: '💼',
      ),
      rating: 6,
    ),
    CategoryData(
      category: ChartCategory(
        id: 'relationships',
        name: 'Relationships',
        color: Colors.pink,
        emoji: '❤️',
      ),
      rating: 9,
    ),
  ],
  config: ChartConfig(size: 300),
  showLegend: true,
)

With Custom Configuration #

RadialRatingChart(
  data: yourCategoryData,
  config: ChartConfig(
    size: 320,
    maxRating: 10,
    minRating: 1,
    gridLevels: 10,
    gridColor: Colors.grey.withOpacity(0.3),
    segmentOpacity: 0.7,
    showSegmentBorders: true,
  ),
  showLegend: true,
  legendColumns: 2,
)

Using Predefined Categories #

The package includes predefined category sets for common use cases:

// Life Balance
RadialRatingChart(
  data: DefaultCategories.lifeBalance
      .map((cat) => CategoryData(category: cat, rating: 7))
      .toList(),
)

// Skills Assessment
RadialRatingChart(
  data: DefaultCategories.skills
      .map((cat) => CategoryData(category: cat, rating: 8))
      .toList(),
)

// Product Features
RadialRatingChart(
  data: DefaultCategories.productFeatures
      .map((cat) => CategoryData(category: cat, rating: 6))
      .toList(),
)

Rounded Donut Chart #

The RoundedDonutChart widget displays data as a donut chart with smooth, rounded edges between segments.

Key Features #

• Smooth Bezier Curve Transitions - Elegant rounded edges between segments instead of sharp corners
• Configurable Center Text - Display totals or custom text in the center with automatic calculation
• Three Legend Styles - Choose between circle, rectangle, or roundedRectangle indicators
• Empty State Visualization - Graceful display when no data is available
• Single Segment Support - Smart handling of charts with just one segment
• Emoji Support - Add emojis to segment labels for visual clarity

Basic Example #

import 'package:flutter/material.dart';
import 'package:radial_charts/radial_charts.dart';

RoundedDonutChart(
  data: [
    DonutSegmentData(
      id: 'completed',
      value: 45,
      color: Colors.green,
      label: 'Completed',
    ),
    DonutSegmentData(
      id: 'pending',
      value: 30,
      color: Colors.orange,
      label: 'Pending',
    ),
    DonutSegmentData(
      id: 'failed',
      value: 25,
      color: Colors.red,
      label: 'Failed',
    ),
  ],
  showCenterText: true,
  centerTextBuilder: (total) => '${total.toInt()}',
  showLegend: true,
  legendStyle: LegendStyle.roundedRectangle,
  showCountInLegend: true,
)

With Custom Configuration #

RoundedDonutChart(
  data: yourSegmentData,
  config: DonutChartConfig(
    size: 270,
    outerRadius: 135,
    innerRadius: 100,
    startAngle: -math.pi / 2,
    sortSegmentsById: true,
  ),
  // Center text options
  centerText: '100',  // Or use centerTextBuilder for dynamic text
  centerTextStyle: TextStyle(
    fontSize: 72,
    fontWeight: FontWeight.w600,
    color: Colors.grey,
  ),
  showCenterText: true,
  // Legend options
  showLegend: true,
  legendStyle: LegendStyle.roundedRectangle, // or circle, rectangle
  legendColumns: 2,
  legendIndicatorSize: Size(33, 28),
  showCountInLegend: true,
)

Legend Styles #

The RoundedDonutChart supports three legend styles:

• LegendStyle.circle - Circular indicators (similar to RadialRatingChart)
• LegendStyle.rectangle - Square indicators with sharp corners
• LegendStyle.roundedRectangle - Rounded rectangle indicators with optional count badges (default)

API Reference #

RadialRatingChart #

Main widget for displaying the chart.

ChartCategory #

Represents a category in the chart.

CategoryData #

Combines a category with its rating value.

ChartConfig #

Configuration for chart appearance.

RoundedDonutChart #

Main widget for displaying the rounded donut chart.

DonutSegmentData #

Represents a segment (slice) in the donut chart.

DonutChartConfig #

Configuration for donut chart appearance.

LegendStyle #

Enum defining legend indicator styles.

• circle - Circular indicators
• rectangle - Rectangular indicators with sharp corners
• roundedRectangle - Rectangular indicators with rounded corners

Examples #

Check out the example folder for complete examples including:

• Life Balance Assessment
• Skills Proficiency Chart
• Product Features Rating
• Custom Data Visualization

Run the example:

cd example
flutter run

Use Cases #

📊 Life Balance Wheels - Track satisfaction across life areas

💼 Skills Assessment - Visualize competency levels

⭐ Product Reviews - Display multi-dimensional ratings

📈 Performance Metrics - Show KPIs across categories

🎯 Goal Tracking - Monitor progress in different areas

📝 Survey Results - Present multi-category survey data

How It Works #

Radial Rating Chart #

A variation of a pie chart where each segment represents a category and the radius varies based on the rating value. Higher ratings extend further from the center, and a concentric grid helps with reading values. This makes it ideal for comparing multiple ratings at a glance.

Rounded Donut Chart #

A donut chart where each segment's arc length is proportional to its value. Segments have smooth, rounded edges achieved through cubic Bezier curves. The center area can display a total or custom text. Well-suited for showing proportional breakdowns — task status, budget allocation, or composition data.

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

License #

This project is licensed under the MIT License - see the LICENSE file for details.

Author #

Created by hzfty

Support & Feedback #

If you find this package useful, please give it a ⭐ on GitHub!

• Bugs & Features: GitHub Issues
• Telegram: @dosavelyev
• Email: hzftyone@gmail.com

Changelog #

See CHANGELOG.md for version history.