family-chart

[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
[![TypeScript][typescript-shield]][typescript-url]
[![Bundle Size][bundle-shield]][bundle-url]

	🎯 Start with Examples Browse pre-built examples and customize them to match your needs. Perfect for quick implementation and learning the library.
🛠️ Visual Builder Complete configuration panel to customize your family tree. Add fields, adjust styling, configure layout options, and generate code for React, Vue, HTML, and JSON.
	🏛️ WikiData Integration See the library in action with real historical family trees. Explore the British Royal Family, Einstein, Leonardo da Vinci, and many other celebrity family trees.

🚀 Framework Support

Family Chart works seamlessly with all major JavaScript frameworks and vanilla JavaScript:

> Pro Tip: Use the Visual Builder to generate framework-specific code automatically!

Features

- 🌳 Interactive Family Trees - Zoom, pan, and navigate through complex family structures
- 🎨 Customizable Styling - Full control over colors, fonts, and layout
- ⚡ Framework Agnostic - Works with React, Vue, Angular, Svelte, or vanilla JavaScript
- 🎯 TypeScript Support - Full type definitions included
- 📊 D3.js Powered - Built on the powerful D3.js visualization library
- 🎯 Easy to Use - Simple API with many examples
- 🔄 Real-time Updates - Dynamic tree updates and modifications
- 🎨 Multiple Card Types - SVG and HTML card components

Documentation

$3

- Chart API - Main chart class and methods
- EditTree API - Edit functionality and form management
- Card API - Card components and customization

$3

- Installation & Quick Start - Get started in minutes
- Data Format - Understanding the data structure
- Getting Started Guide - Complete setup and configuration guide

$3

- Live Examples - Interactive examples and demos
- Visual Builder - Code generator and configuration tool

Support & Feedback

$3

- Bug Reports: Use the issue tracker to report bugs
- Include steps to reproduce the issue
- Provide browser and version information
- Add screenshots if applicable
- Feature Requests: Contact me directly at donatso.dev@gmail.com for feature requests

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

Email: donatso.dev@gmail.com

Project Link: https://github.com/donatso/family-chart

[contributors-shield]: https://img.shields.io/github/contributors/donatso/family-chart.svg?style=for-the-badge
[contributors-url]: https://github.com/donatso/family-chart/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/donatso/family-chart.svg?style=for-the-badge
[forks-url]: https://github.com/donatso/family-chart/network/members
[stars-shield]: https://img.shields.io/github/stars/donatso/family-chart.svg?style=for-the-badge
[stars-url]: https://github.com/donatso/family-chart/stargazers
[issues-shield]: https://img.shields.io/github/issues/donatso/family-chart.svg?style=for-the-badge
[issues-url]: https://github.com/donatso/family-chart/issues
[license-shield]: https://img.shields.io/github/license/donatso/family-chart.svg?style=for-the-badge
[license-url]: https://github.com/donatso/family-chart/blob/master/LICENSE.txt
[typescript-shield]: https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white
[typescript-url]: https://www.typescriptlang.org/
[bundle-shield]: https://img.shields.io/bundlephobia/minzip/family-chart?style=for-the-badge
[bundle-url]: https://bundlephobia.com/package/family-chart
[product-screenshot]: https://github.com/user-attachments/assets/a4f8a9c0-c327-45fa-90bc-23d73578a304
[product-basic-tree-screenshot]: https://github.com/user-attachments/assets/7e231e53-9230-49f9-ae93-8125096237dc
[product-wiki-tree-screenshot]: https://github.com/user-attachments/assets/4e2dc169-4b43-46f3-b31c-db17f4d489da
[create-tree-screenshot]: https://github.com/user-attachments/assets/ce5c4b33-48dd-441c-aa2f-f581b57ddcb7