LinSpiderMonkeyChart #

A Flutter widget library for rendering interactive spider/radar charts. This library provides a flexible and customizable way to visualize multi-variable data in a radar chart format.

Features #

• Spider Chart: Customizable radar chart with support for multiple datasets.
• Interactive: Supports touch interactions, rotation, and selection.
• Customizable: Extensive theming options for colors, fonts, and styles.
• Widgets: Includes pre-built cards and list items for displaying charts in various layouts.

Screenshots #

Interactive Chart	List Card

Grid Card	Compact Row

Installation #

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

dependencies:
  lin_spider_monkey_chart: ^1.0.0

Usage #

1. Basic Spider Chart #

The SpiderChart widget is the core component for rendering the radar chart.

import 'package:lin_spider_monkey_chart/lin_spider_monkey_chart.dart';

SpiderChart(
  // Labels for each dimension of the chart
  labels: ['Integrity', 'Learning', 'Accountability', 'Teamwork', 'Innovation'],
  // Data values corresponding to each label (must be same length as labels)
  data: [80, 65, 90, 75, 85],
  // Maximum value for the chart scale (default is 100)
  maxValue: 100,
  // Custom theme configuration
  theme: SpiderChartThemeData(
    dataLineColor: Colors.blue, // Color of the polygon outline
    dataFillColor: Colors.blue.withValues(alpha: 0.2), // Color of the polygon fill
    labelStyle: TextStyle(fontSize: 12, color: Colors.black87), // Style for labels
  ),
)

Interactive Spider Chart #

A wrapper around SpiderChart that adds touch interaction, animations, and score bubbles.

New in 1.0.9: The chart now adapts responsively to its parent constraints. You can wrap it in a SizedBox, Expanded, or AspectRatio to control its size. It also fully supports Size.infinite usage for unbounded layouts.

 SizedBox(
  height: 400, // Define height or use Expanded
  child: InteractiveSpiderChart(
    data: data,
    maxValue: 100,
    labels: labels,
    size: Size.infinite, // Use infinite to fill parent
    theme: SpiderChartThemeData(
       chartTopOffset: 0,
       // ... other theme options
    ),
  ),
)

// Size of the interactive area size: Size(300, 400), // Theme with interactive specific settings theme: SpiderChartThemeData( rotateToTop: true, // Rotate the selected point to the top rotationDuration: Duration(milliseconds: 800), // Animation duration showSelectedLabel: true, // Highlight the selected label bubbleOffset: 10, // Distance of the score bubble from the chart ), )

### 3. Pre-built UI Widgets

The library comes with several pre-built widgets to easily integrate charts into your UI.

#### ChartListCard

A card widget suitable for lists, displaying a small chart alongside title and details.

```dart
ChartListCard(
  title: 'Performance Review',
  scoreText: 'Avg: 85%',
  dateText: 'Nov 24, 2025',
  labels: ['A', 'B', 'C', 'D', 'E'],
  data: [80, 70, 90, 60, 85],
  onTap: () {
    // Handle tap event
  },
  theme: SpiderChartThemeData(
    dataLineColor: Colors.teal,
    dataFillColor: Colors.teal.withValues(alpha: 0.2),
  ),
)

ChartGridCard

A card widget designed for grid layouts.

ChartGridCard(
  title: 'Sales Skills',
  subtitle: '5 Competencies',
  labels: ['Neg', 'Prod', 'Close', 'Cust', 'Prosp'],
  data: [95, 85, 78, 92, 68],
  onTap: () {
    // Handle tap event
  },
  theme: SpiderChartThemeData(
    dataLineColor: Colors.purple,
    dataFillColor: Colors.purple.withValues(alpha: 0.2),
  ),
)

ChartCompactRow

A compact row widget, useful for dense lists or summaries.

ChartCompactRow(
  title: 'Core Values',
  score: 79.0, // Displayed score
  labels: ['Int', 'Lrn', 'Acc', 'Team', 'Inn'],
  data: [80, 65, 90, 75, 85],
  onTap: () {
    // Handle tap event
  },
)

4. Theming #

You can fully customize the look and feel using SpiderChartThemeData.

SpiderChartThemeData(
  // Grid and Axis lines
  gridLineColor: Colors.grey[300]!,
  gridDashedLineColor: Colors.grey[200]!,
  spokeLineColor: Colors.grey[300]!,

  // Data Polygon
  dataLineColor: Colors.blue,
  dataFillColor: Colors.blue.withValues(alpha: 0.2),
  strokeWidth: 3.0,

  // Points
  pointSize: 4.0,
  pointColor: Colors.blue,

  // Labels
  labelOffsetFromChart: 15.0, // Distance of labels from the chart
  labelStyle: TextStyle(color: Colors.black, fontSize: 10),
  selectedLabelStyle: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),

  // Interactivity
  rotateToTop: true,
  showSelectedLabel: true,
)