Skip to main content

Features

Chart Types​

Organization Chart​

  • Hierarchical tree structures
  • Manager-subordinate relationships
  • Collapsible/expandable nodes
  • Drag & drop reorganization
  • Multi-level hierarchies
  • Leaf node column arrangement

Family Genogram​

  • Multi-generational family trees
  • Parent-child relationships
  • Marriage/divorce indicators
  • Gender-based positioning
  • Multiple spouse support
  • Sibling group organization

Core Capabilities​

Customization​

OrgChart<Employee>(
  controller: controller,
  builder: (details) => Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.blue, Colors.cyan],
      ),
      borderRadius: BorderRadius.circular(12),
    ),
    child: Stack(
      children: [
        _buildNodeContent(details.item),
        if (details.level == 1)
          Positioned(
            top: 0,
            right: 0,
            child: _buildBadge('CEO'),
          ),
        if (details.isBeingDragged)
          Container(
            color: Colors.blue.withOpacity(0.3),
          ),
      ],
    ),
  ),
);

Edge Styling​

OrgChart(
  arrowStyle: SolidGraphArrow(),
  linePaint: Paint()
    ..color = Colors.blue
    ..strokeWidth = 2.0,
  cornerRadius: 10.0,
)

Interactions​

Drag and Drop​

OrgChart(
  isDraggable: true,
  onDrop: (dragged, target, isTargetSubnode) {
    if (!canMoveEmployee(dragged, target)) {
      return;
    }
    updateEmployeeManager(dragged, target);
    controller.replaceAll(updatedEmployees);
  },
)

Zoom and Pan​

OrgChart(
  zoomConfig: ZoomConfig(
    minScale: 0.5,
    maxScale: 3.0,
    initialScale: 1.0,
  ),
  interactionConfig: InteractionConfig(
    enableZoom: true,
    enablePan: true,
    enableDoubleTapZoom: true,
  ),
)

Performance​

  • QuadTree Optimization: Fast node lookup for large charts
  • Viewport Culling: Only render visible nodes
  • Lazy Loading: Load children on demand
  • Handles 1000+ nodes smoothly

Export​

// Export as PNG
final imageBytes = await controller.exportAsImage();

// Export as PDF
final pdfDocument = await controller.exportAsPdf();

// Custom resolution
final hdImage = await exportChartAsImage(
  controller.repaintBoundaryKey,
  pixelRatio: 3.0,
);

Comparison Matrix​

FeatureOrgChartGenogram
Hierarchical Layout✅✅
Drag & Drop✅✅
Zoom & Pan✅✅
Node Collapse/Expand✅❌
Custom Node Builder✅✅
Edge Styling✅✅
Marriage Relationships❌✅
Gender-based Layout❌✅
Multiple Parents❌✅
Export (Image/PDF)✅✅
Performance (1000+ nodes)✅✅
Animations✅✅