PHPackages                             magicsunday/webtrees-fan-chart - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. magicsunday/webtrees-fan-chart

ActiveWebtrees-module[Utility & Helpers](/categories/utility)

magicsunday/webtrees-fan-chart
==============================

SVG ancestor fan chart module for the webtrees genealogy application — interactive D3.js visualization with zoom, export and up to 10 generations.

3.6.4(today)6730521GPL-3.0-or-laterJavaScriptPHP 8.3 - 8.5CI passing

Since Sep 8Pushed today10 watchersCompare

[ Source](https://github.com/magicsunday/webtrees-fan-chart)[ Packagist](https://packagist.org/packages/magicsunday/webtrees-fan-chart)[ Fund](https://paypal.me/magicsunday)[ RSS](/packages/magicsunday-webtrees-fan-chart/feed)WikiDiscussions main Synced today

READMEChangelog (10)Dependencies (42)Versions (61)Used By (0)

[![Latest version](https://camo.githubusercontent.com/e7e87f6987f7db4e71f1d1357d666769801fa66a24fe73ae5b90796ab78ca005/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f6d6167696373756e6461792f77656274726565732d66616e2d63686172743f736f72743d73656d766572)](https://github.com/magicsunday/webtrees-fan-chart/releases/latest)[![License](https://camo.githubusercontent.com/515d654cd924bb9420653602190526f5e05c810afe53ae40162765aa6c749405/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6d6167696373756e6461792f77656274726565732d66616e2d6368617274)](https://github.com/magicsunday/webtrees-fan-chart/blob/main/LICENSE)[![CI](https://github.com/magicsunday/webtrees-fan-chart/actions/workflows/ci.yml/badge.svg)](https://github.com/magicsunday/webtrees-fan-chart/actions/workflows/ci.yml)

- [Fan chart](#fan-chart)
    - [Installation](#installation)
        - [Manual installation](#manual-installation)
        - [Using Composer](#using-composer)
        - [Using Git](#using-git)
    - [Update](#update)
    - [Configuration](#configuration)
    - [Usage](#usage)
    - [Troubleshooting](#troubleshooting)
    - [Development](#development)

Fan chart
=========

[](#fan-chart)

This module provides an interactive SVG ancestor fan chart for the [webtrees](https://www.webtrees.net) genealogy application. Click on any ancestor to re-center the chart on that person. Right-click to open a tooltip with detailed dates, places, and images.

[![225 Degree fan chart with family branch colors](assets/fan-chart-225-color.png)](assets/fan-chart-225-color.png)

Installation
------------

[](#installation)

Requires **webtrees 2.2** and **PHP 8.3** or later.

### Manual installation

[](#manual-installation)

Important

**Download the right `.zip` file.** Each [GitHub release](https://github.com/magicsunday/webtrees-fan-chart/releases/latest) page lists two kinds of archive:

- ✅ **`webtrees-fan-chart.zip`** — listed under **Assets** at the bottom of the release. This is the install-ready archive: it bundles the required `vendor/` dependencies (such as `webtrees-module-base`).
- ❌ **"Source code (zip)" / `webtrees-fan-chart-.zip`** — auto-generated by GitHub from the tag. This is the raw source *without* bundled dependencies. Uploading it to `modules_v4/` will fail with `Interface "MagicSunday\Webtrees\ModuleBase\…" not found` (or `ModuleAssetUrlInterface not found`).

**Always pick the asset zip, never "Source code (zip)".**

Important

**If a previous version of this module is already installed:** delete the entire `modules_v4/webtrees-fan-chart` folder *before* extracting the new ZIP. Extracting on top of an existing folder leaves stale files behind that can clash with the new release — a common cause of `Interface … not found` errors right after an update.

1. Open the [latest release](https://github.com/magicsunday/webtrees-fan-chart/releases/latest) page.
2. Under **Assets**, download `webtrees-fan-chart.zip`.
3. Upload the `.zip` file to your web server.
4. Unzip the package into your `modules_v4` directory.
5. Rename the folder to `webtrees-fan-chart`.

You should now see a `modules_v4/webtrees-fan-chart` directory containing the module files.

### Using Composer

[](#using-composer)

Run the following command from the root of your webtrees installation:

```
composer require magicsunday/webtrees-fan-chart --update-no-dev
```

The module will automatically install into the `modules_v4` directory.

To remove the module:

```
composer remove magicsunday/webtrees-fan-chart --update-no-dev
```

If you are using the development version of webtrees (`main` branch):

```
composer require magicsunday/webtrees-fan-chart:dev-main --update-no-dev
```

### Using Git

[](#using-git)

Clone the repository directly into your `modules_v4` directory:

```
git clone https://github.com/magicsunday/webtrees-fan-chart.git modules_v4/webtrees-fan-chart
```

Update
------

[](#update)

To update to the latest version:

- **Manual installation**: From the [latest release](https://github.com/magicsunday/webtrees-fan-chart/releases/latest) **Assets** section, download `webtrees-fan-chart.zip` (not "Source code (zip)"), delete the old `modules_v4/webtrees-fan-chart` folder, and extract the new one.
- **Composer**: Run `composer update magicsunday/webtrees-fan-chart --update-no-dev`.
- **Git**: Run `git pull` inside the `modules_v4/webtrees-fan-chart` directory.

Configuration
-------------

[](#configuration)

1. Go to the **Control Panel** (admin section) of your webtrees installation.
2. Scroll down to the **Modules** section and click on **Charts** (under Genealogy).
3. Enable the **Fan chart** module. Optionally disable the built-in fan chart to avoid confusion.
4. Click **Save**.

[![Control panel - Module administration](assets/control-panel-modules.png)](assets/control-panel-modules.png)

Usage
-----

[](#usage)

Open the **Charts** menu on any individual page and select **Fan chart**.

The form at the top lets you choose the starting person, fan size (180-360 degrees), and number of generations (2-10).

Click **Show more options** to access additional settings:

OptionDescription**Display mode**Choose between "Show names and images", "Show names only", or "Show images only". Images are only shown if the arc segment is wide enough.**Show descendants**Shows partners and children as arcs below the ancestor section. The fan size is limited to 180-270 degrees when enabled.**Hide empty segments**Hides chart segments for missing ancestors.**Show places**Displays birth and death places in the chart arcs where space allows. For descendants with many children, places are automatically suppressed. Choose the level of detail (full name or lowest 1-3 hierarchy levels).**Show parent marriage dates**Displays marriage dates in a narrow arc between each pair of parent arcs. When descendants are enabled, also shows the marriage date between the central person and their partners.**Show family colors**Colors arcs by family branch. Paternal and maternal base colors are configurable via color pickers.**Birth and death date precision**Show full birth and death dates (DD.MM.YYYY) for early generations. Outer generations use a compact year-only format. Marriage dates switch to year-only from generation 7 and are hidden from generation 9. Descendants with narrow arcs automatically use a compact format.**Number of inner levels**Controls how many generations use the wider inner-arc layout with text along the arc path.**Font size**Scales the text size (50-150%).**Interacting with the chart:**

ActionEffectClick on a personRe-centers the chart on that personRight-click on a personOpens a detailed tooltip with dates, places, and imageCtrl + scrollZoom in/outClick and dragMove the chartClick center buttonReset view to centerFullscreen buttonToggle fullscreen modePNG / SVG buttonsExport the chart as an image fileTroubleshooting
---------------

[](#troubleshooting)

**Fatal error after a manual installation or update: `Interface "MagicSunday\Webtrees\ModuleBase\…" not found` (or `ModuleAssetUrlInterface not found`)**

- You probably downloaded the GitHub-generated **"Source code (zip)"** instead of the install-ready asset **`webtrees-fan-chart.zip`**. The asset bundles the required `vendor/` dependencies; the source zip does not. Open the [latest release](https://github.com/magicsunday/webtrees-fan-chart/releases/latest), scroll to **Assets**, download `webtrees-fan-chart.zip`, and re-extract.
- If you used the asset zip, make sure you **deleted the previous `modules_v4/webtrees-fan-chart` folder before extracting**. Stale files from an older version can shadow the new bundled vendor code and produce the same error.

**The chart does not appear / shows an error**

- Make sure the module is enabled in the Control Panel under Modules > Charts.
- Check that your PHP version is 8.3 or later.
- Clear your browser cache and reload the page.

**Images are not displayed**

- Ensure "Show highlight images" is enabled in the tree preferences (Control Panel > Family trees > Preferences).
- Verify that media files are uploaded and linked to individuals.

**Places are not shown**

- Enable "Show places" in the chart options (under "Show more options").
- Make sure the individuals have PLAC fields in their GEDCOM records.

Development
-----------

[](#development)

This section is for developers who want to contribute to the module.

### Building JavaScript

[](#building-javascript)

Using Docker (no local Node.js required):

```
make install
make build
```

Using local Node.js:

```
npm install
npm run prepare
```

### Running tests

[](#running-tests)

```
# JavaScript tests
npm test

# Full PHP + JS quality check
composer update
composer ci:test
```

###  Health Score

65

↑

FairBetter than 99% of packages

Maintenance100

Actively maintained with recent releases

Popularity29

Limited adoption so far

Community24

Small or concentrated contributor base

Maturity93

Battle-tested with a long release history

 Bus Factor1

Top contributor holds 96.4% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~53 days

Recently: every ~1 days

Total

53

Last Release

0d ago

Major Versions

v1.7.1 → 2.02020-03-15

1.7.x-dev → v2.0.12020-03-22

2.7.2 → 3.0.02024-12-02

2.2.x-dev → 3.1.02026-04-10

PHP version history (4 changes)v1.7PHP >=5.3.3 <7.0

2.0PHP ~7.1

2.1.3PHP ^7.3 || ^8.0

3.1.0PHP 8.3 - 8.5

### Community

Maintainers

![](https://www.gravatar.com/avatar/1979dde7200fccc0e21e18a29b5566f22fa01ad104e577254fe74e14ae04a297?d=identicon)[magicsunday](/maintainers/magicsunday)

---

Top Contributors

[![magicsunday](https://avatars.githubusercontent.com/u/564393?v=4)](https://github.com/magicsunday "magicsunday (772 commits)")[![TheDutchJewel](https://avatars.githubusercontent.com/u/46184729?v=4)](https://github.com/TheDutchJewel "TheDutchJewel (7 commits)")[![gudjonsi](https://avatars.githubusercontent.com/u/100283838?v=4)](https://github.com/gudjonsi "gudjonsi (5 commits)")[![ekdahl](https://avatars.githubusercontent.com/u/2682230?v=4)](https://github.com/ekdahl "ekdahl (4 commits)")[![raaspt](https://avatars.githubusercontent.com/u/179502653?v=4)](https://github.com/raaspt "raaspt (3 commits)")[![ddrury](https://avatars.githubusercontent.com/u/104515?v=4)](https://github.com/ddrury "ddrury (2 commits)")[![anzeljg](https://avatars.githubusercontent.com/u/1914175?v=4)](https://github.com/anzeljg "anzeljg (2 commits)")[![zaharchenko-yurka](https://avatars.githubusercontent.com/u/17779489?v=4)](https://github.com/zaharchenko-yurka "zaharchenko-yurka (1 commits)")[![DaPoHou](https://avatars.githubusercontent.com/u/26761596?v=4)](https://github.com/DaPoHou "DaPoHou (1 commits)")[![jpretired](https://avatars.githubusercontent.com/u/350656?v=4)](https://github.com/jpretired "jpretired (1 commits)")[![JustCarmen](https://avatars.githubusercontent.com/u/5641963?v=4)](https://github.com/JustCarmen "JustCarmen (1 commits)")[![mrqd9](https://avatars.githubusercontent.com/u/56225476?v=4)](https://github.com/mrqd9 "mrqd9 (1 commits)")[![yann64](https://avatars.githubusercontent.com/u/2534680?v=4)](https://github.com/yann64 "yann64 (1 commits)")

---

Tags

ancestorschartd3d3jsdata-visualizationfamily-treefan-chartgenealogymodulesvgvisualizationwebtreeswebtrees-modulesvgmodulechartd3.jsdata visualizationvisualizationd3ancestorsgenealogywebtreesFamily-treefan-chart

###  Code Quality

TestsPHPUnit

Static AnalysisPHPStan, Rector

Code StylePHP CS Fixer

Type Coverage Yes

### Embed Badge

![Health badge](/badges/magicsunday-webtrees-fan-chart/health.svg)

```
[![Health](https://phpackages.com/badges/magicsunday-webtrees-fan-chart/health.svg)](https://phpackages.com/packages/magicsunday-webtrees-fan-chart)
```

###  Alternatives

[novus/nvd3

A reusable charting library written in d3.js

7.2k207.7k2](/packages/novus-nvd3)[benpickles/peity

Peity (sounds like deity) is a jQuery plugin that converts an element's content into a mini `<svg>` pie, donut, line or bar chart.

4.2k2.8k](/packages/benpickles-peity)[fisharebest/webtrees

webtrees online genealogy

73710.5k13](/packages/fisharebest-webtrees)[professional-wiki/network

MediaWiki extension for adding interactive network visualizations to your wiki pages

3211.9k](/packages/professional-wiki-network)[antoineaugusti/easyphpcharts

A PHP class for chartjs.org charts.

252.8k](/packages/antoineaugusti-easyphpcharts)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)