MatesCharts v0.6.0
All charts

Trees & Networks

Graph family charts map relationships: force-directed network graphs, radial dependency wheels, boxed organization charts and circular arc diagrams. Each uses its own Highcharts module (Tier B — one import per family member).

Usage

Create a chart atom with standard Highcharts options, then render Chart(chart) anywhere in a mates template. Every later chart.set(…) or chart.update(…) re-renders the chart — no imperative Highcharts code.

Quick start 
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";

const chart = chartAtom({
    chart: {
        type: "networkgraph"
    },
    title: {
        text: "Package dependency graph"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    plotOptions: {
        networkgraph: {
            layoutAlgorithm: {
                enableSimulation: true,
                integration: "verlet"
            },
            dataLabels: {
                enabled: true,
                format: "{point.name}"
            },
            linkOpacity: 0.35
        }
    },
    series: [
        {
            type: "networkgraph",
            name: "Dependencies",
            data: [
                [
                    "app",
                    "mates"
                ],
                [
                    "app",
                    "mates-ui"
                ],
                [
                    "app",
                    "mates-charts"
                ],
                [
                    "app",
                    "mates-icons"
                ],
                [
                    "mates",
                    "lit-html"
                ],
                [
                    "mates-ui",
                    "mates"
                ],
                [
                    "mates-charts",
                    "mates"
                ],
                [
                    "mates-charts",
                    "highcharts"
                ],
                [
                    "mates-icons",
                    "mates"
                ],
                [
                    "mates-ssg",
                    "mates"
                ],
                [
                    "docs",
                    "mates-ui"
                ],
                [
                    "docs",
                    "mates-charts"
                ],
                [
                    "docs",
                    "mates-icons"
                ]
            ]
        }
    ]
});

// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
    html`<div style="height: 22rem">${Chart(chart)}</div>`;

Live examples

Created with Highcharts 12.5.0Package dependency graph​app​appmates​matesmates-ui​mates-uimates-charts​mates-chartsmates-icons​mates-iconslit-html​lit-htmlhighcharts​highchartsmates-ssg​mates-ssgdocs​docshighcharts-rude917-4​highcharts-rude917-4highcharts-rude917-5​highcharts-rude917-5highcharts-rude917-6​highcharts-rude917-6highcharts-rude917-7​highcharts-rude917-7highcharts-rude917-8​highcharts-rude917-8highcharts-rude917-9​highcharts-rude917-9highcharts-rude917-10​highcharts-rude917-10highcharts-rude917-11​highcharts-rude917-11highcharts-rude917-12​highcharts-rude917-12highcharts-rude917-13​highcharts-rude917-13highcharts-rude917-14​highcharts-rude917-14highcharts-rude917-15​highcharts-rude917-15highcharts-rude917-16​highcharts-rude917-16
Force-directed network graph Highcharts demo ↗

Nodes connect by links; the layout algorithm settles positions with spring physics. enableSimulation = false lays out once, statically.

Module setup. This example needs one extra Highcharts module: 
import "highcharts/modules/networkgraph";
TypeScript 
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";

const chart = chartAtom({
    chart: {
        type: "networkgraph"
    },
    title: {
        text: "Package dependency graph"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    plotOptions: {
        networkgraph: {
            layoutAlgorithm: {
                enableSimulation: true,
                integration: "verlet"
            },
            dataLabels: {
                enabled: true,
                format: "{point.name}"
            },
            linkOpacity: 0.35
        }
    },
    series: [
        {
            type: "networkgraph",
            name: "Dependencies",
            data: [
                [
                    "app",
                    "mates"
                ],
                [
                    "app",
                    "mates-ui"
                ],
                [
                    "app",
                    "mates-charts"
                ],
                [
                    "app",
                    "mates-icons"
                ],
                [
                    "mates",
                    "lit-html"
                ],
                [
                    "mates-ui",
                    "mates"
                ],
                [
                    "mates-charts",
                    "mates"
                ],
                [
                    "mates-charts",
                    "highcharts"
                ],
                [
                    "mates-icons",
                    "mates"
                ],
                [
                    "mates-ssg",
                    "mates"
                ],
                [
                    "docs",
                    "mates-ui"
                ],
                [
                    "docs",
                    "mates-charts"
                ],
                [
                    "docs",
                    "mates-icons"
                ]
            ]
        }
    ]
});

// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
    html`<div style="height: 22rem">${Chart(chart)}</div>`;
Created with Highcharts 12.5.0Traffic between serviceshighcharts-rude917-23​highcharts-rude917-23highcharts-rude917-24​highcharts-rude917-24highcharts-rude917-25​highcharts-rude917-25highcharts-rude917-26​highcharts-rude917-26highcharts-rude917-27​highcharts-rude917-27highcharts-rude917-28​highcharts-rude917-28gateway​gatewayauth​authusers​usersorders​orderspayments​payments
Dependency wheel Highcharts demo ↗

A sankey-like dataset wrapped around a circle — the chord-diagram view of the same flows.

Module setup. This example needs one extra Highcharts module: 
import "highcharts/modules/dependency-wheel";
TypeScript 
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";

const chart = chartAtom({
    chart: {
        type: "dependencywheel"
    },
    title: {
        text: "Traffic between services"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    plotOptions: {
        dependencywheel: {
            dataLabels: {
                enabled: true,
                format: "{point.name}"
            }
        }
    },
    series: [
        {
            type: "dependencywheel",
            name: "Traffic",
            data: [
                {
                    from: "gateway",
                    to: "auth",
                    weight: 42
                },
                {
                    from: "gateway",
                    to: "users",
                    weight: 68
                },
                {
                    from: "gateway",
                    to: "orders",
                    weight: 55
                },
                {
                    from: "auth",
                    to: "users",
                    weight: 30
                },
                {
                    from: "orders",
                    to: "payments",
                    weight: 48
                },
                {
                    from: "orders",
                    to: "users",
                    weight: 22
                }
            ]
        }
    ]
});

// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
    html`<div style="height: 22rem">${Chart(chart)}</div>`;
Created with Highcharts 12.5.0Platform team
Organization chart Highcharts demo ↗

Hierarchy via { id, parent } links or levels; levels[] controls indentation and box styling per depth.

Module setup. This example needs one extra Highcharts module: 
import "highcharts/modules/organization";
TypeScript 
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";

const chart = chartAtom({
    chart: {
        type: "organization"
    },
    title: {
        text: "Platform team"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    plotOptions: {
        organization: {
            borderRadius: 6,
            borderWidth: 1,
            borderColor: "#00968c",
            hangingIndent: 16,
            levels: [
                {
                    level: 0,
                    color: "#00968c",
                    dataLabels: {
                        style: {
                            color: "#ffffff",
                            fontWeight: "700"
                        }
                    }
                },
                {
                    level: 1,
                    color: "#0d9488",
                    borderWidth: 1
                }
            ]
        }
    },
    series: [
        {
            type: "organization",
            name: "Org",
            data: [
                {
                    id: "cto",
                    name: "CTO",
                    title: "Platform"
                },
                {
                    id: "fe",
                    name: "Frontend",
                    parent: "cto"
                },
                {
                    id: "be",
                    name: "Backend",
                    parent: "cto"
                },
                {
                    id: "sre",
                    name: "SRE",
                    parent: "cto"
                },
                {
                    name: "Web squad",
                    parent: "fe"
                },
                {
                    name: "Design sys",
                    parent: "fe"
                },
                {
                    name: "API team",
                    parent: "be"
                },
                {
                    name: "Data team",
                    parent: "be"
                },
                {
                    name: "On-call",
                    parent: "sre"
                }
            ]
        }
    ]
});

// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
    html`<div style="height: 22rem">${Chart(chart)}</div>`;
Created with Highcharts 12.5.0Co-authorshipshighcharts-rude917-48​highcharts-rude917-48highcharts-rude917-49​highcharts-rude917-49highcharts-rude917-50​highcharts-rude917-50highcharts-rude917-51​highcharts-rude917-51highcharts-rude917-52​highcharts-rude917-52highcharts-rude917-53​highcharts-rude917-53
Arc diagram Highcharts demo ↗

Nodes on a line, relationships as arcs above — an elegant alternative to force graphs for medium-sized sets.

Module setup. This example needs one extra Highcharts module: 
import "highcharts/modules/arc-diagram";
TypeScript 
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";

const chart = chartAtom({
    chart: {
        type: "arcdiagram"
    },
    title: {
        text: "Co-authorships"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    plotOptions: {
        arcdiagram: {
            borderColor: "#00968c",
            borderWidth: 1,
            dataLabels: {
                enabled: true,
                format: "{point.name}",
                rotation: 45
            },
            linkColor: "rgba(0, 150, 140, 0.4)"
        }
    },
    series: [
        {
            type: "arcdiagram",
            name: "Papers",
            data: [
                {
                    from: "Ada",
                    to: "Grace"
                },
                {
                    from: "Ada",
                    to: "Alan"
                },
                {
                    from: "Grace",
                    to: "Alan"
                },
                {
                    from: "Alan",
                    to: "Edsger"
                },
                {
                    from: "Edsger",
                    to: "Barbara"
                },
                {
                    from: "Grace",
                    to: "Barbara"
                }
            ]
        }
    ]
});

// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
    html`<div style="height: 22rem">${Chart(chart)}</div>`;
Created with Highcharts 12.5.0-Monorepo packagesmonorepo​monorepomates​matesmates-ui​mates-uimates-charts​mates-chartsmates-icons​mates-icons
Treegraph Highcharts demo ↗

A top-down hierarchy with flowing links — lighter than an org chart, orderable via the levels layout. Requires the treemap module (Tier A) plus treegraph.

Module setup. This example needs 2 extra Highcharts modules: 
import "highcharts/modules/treemap";
import "highcharts/modules/treegraph";
TypeScript 
import { html } from "mates";
import { Chart, chartAtom } from "mates-charts";

const chart = chartAtom({
    chart: {
        type: "treegraph"
    },
    title: {
        text: "Monorepo packages"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    plotOptions: {
        treegraph: {
            borderRadius: 6,
            borderWidth: 1,
            borderColor: "#00968c",
            dataLabels: {
                enabled: true,
                format: "{point.name}"
            },
            link: {
                radius: 8,
                curved: true,
                lineWidth: 1.5
            }
        }
    },
    series: [
        {
            type: "treegraph",
            data: [
                {
                    id: "root",
                    name: "monorepo"
                },
                {
                    parent: "root",
                    name: "mates"
                },
                {
                    parent: "root",
                    name: "mates-ui"
                },
                {
                    parent: "root",
                    name: "mates-charts"
                },
                {
                    parent: "root",
                    name: "mates-icons"
                },
                {
                    parent: "mates",
                    name: "runtime"
                },
                {
                    parent: "mates",
                    name: "router"
                },
                {
                    parent: "mates",
                    name: "ssr"
                },
                {
                    parent: "mates-ui",
                    name: "components"
                },
                {
                    parent: "mates-ui",
                    name: "tokens"
                },
                {
                    parent: "mates-charts",
                    name: "gallery"
                }
            ]
        }
    ]
});

// render inside any mates template — give the wrapper a height:
export const MyChart = () =>
    html`<div style="height: 22rem">${Chart(chart)}</div>`;

Options reference

mates-charts passes options straight through to Highcharts — these are the keys that matter for trees & networks charts. See the full Highcharts API for everything else.

Option Type Default Description
chart.type "networkgraph" | "dependencywheel" | "organization" | "arcdiagram" | "treegraph" — Each type needs its own highcharts/modules/* import.
plotOptions.networkgraph.layoutAlgorithm AlgorithmOptions — enableSimulation, integration (verlet/euler), gravitationalConstant.
series[].data [from, to][] — Link list; nodes materialise from names.
series[].nodes[] { id, color, marker, mass }[] — Per-node overrides — size, colour, physics mass.
plotOptions.networkgraph.linkOpacity number 0.5 Link line transparency.
plotOptions.organization.levels[] { level, color, borderWidth }[] — Per-depth box styling; hangingIndent indents children.