[![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]

Family Chart

Family Chart is a powerful D3.js-based visualization library for creating beautiful, interactive family trees.

🎯 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:

[![React](https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=react&logoColor=black&logoWidth=20)](https://codepen.io/donatso/pen/mdNgeQN?editors=0010) [![Vue](https://img.shields.io/badge/Vue-4FC08D?style=for-the-badge&logo=vue.js&logoColor=white&logoWidth=20)](https://codepen.io/donatso/pen/poMBjZe) [![Angular](https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular&logoColor=white&logoWidth=20)](https://codesandbox.io/p/devbox/family-chart-angular-example-j5mpy5) [![Svelte](https://img.shields.io/badge/Svelte-FF3E00?style=for-the-badge&logo=svelte&logoColor=white&logoWidth=20)](https://codesandbox.io/p/devbox/family-chart-svelte-example-lclvgx) [![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black&logoWidth=20)](https://codepen.io/donatso/pen/ExqJVEQ?editors=1000)

> **Pro Tip**: Use the [Visual Builder](https://donatso.github.io/family-chart-doc/create-tree/) 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 ### API Reference - **[Chart API](https://donatso.github.io/family-chart/classes/Chart.html)** - Main chart class and methods - **[EditTree API](https://donatso.github.io/family-chart/classes/EditTree.html)** - Edit functionality and form management - **[Card API](https://donatso.github.io/family-chart/classes/CardHtmlClass.html)** - Card components and customization ### Guides - **[Installation & Quick Start](docs/installation-and-quickstart.md)** - Get started in minutes - **[Data Format](docs/data-format.md)** - Understanding the data structure - **[Getting Started Guide](https://donatso.github.io/family-chart-doc/)** - Complete setup and configuration guide ### Examples - **[Live Examples](https://donatso.github.io/family-chart-doc/examples/)** - Interactive examples and demos - **[Visual Builder](https://donatso.github.io/family-chart-doc/create-tree/)** - Code generator and configuration tool ## Support & Feedback ### Reporting Issues - **Bug Reports**: Use the [issue tracker](https://github.com/donatso/family-chart/issues) 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](mailto: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](mailto:donatso.dev@gmail.com) Project Link: [https://github.com/donatso/family-chart](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