Funnel & Pyramid

Funnels narrow stage by stage — conversion flows, sales pipelines, maturity models. The pyramid variant flips the shape. Both register via the funnel module (Tier A).

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: "funnel"
    },
    title: {
        text: "Signup funnel"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    plotOptions: {
        funnel: {
            neckWidth: "25%",
            neckHeight: "25%",
            borderRadius: 4,
            dataLabels: {
                enabled: true,
                format: "<b>{point.name}</b> ({y})",
                softConnector: true
            }
        }
    },
    series: [
        {
            type: "funnel",
            name: "Users",
            data: [
                [
                    "Visited",
                    12540
                ],
                [
                    "Signed up",
                    4820
                ],
                [
                    "Activated",
                    2160
                ],
                [
                    "Upgraded",
                    610
                ]
            ]
        }
    ]
});

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

Live examples

Conversion funnel

neckWidth and neckHeight shape the transition between stages; dataLabels print stage names and values.

TypeScript

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

const chart = chartAtom({
    chart: {
        type: "funnel"
    },
    title: {
        text: "Signup funnel"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    plotOptions: {
        funnel: {
            neckWidth: "25%",
            neckHeight: "25%",
            borderRadius: 4,
            dataLabels: {
                enabled: true,
                format: "<b>{point.name}</b> ({y})",
                softConnector: true
            }
        }
    },
    series: [
        {
            type: "funnel",
            name: "Users",
            data: [
                [
                    "Visited",
                    12540
                ],
                [
                    "Signed up",
                    4820
                ],
                [
                    "Activated",
                    2160
                ],
                [
                    "Upgraded",
                    610
                ]
            ]
        }
    ]
});

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

Pyramid Highcharts demo ↗

chart.type = "pyramid" — same options, inverted shape. Often used for maturity or hierarchy narratives.

TypeScript

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

const chart = chartAtom({
    chart: {
        type: "pyramid"
    },
    title: {
        text: "Maturity model"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    plotOptions: {
        pyramid: {
            borderRadius: 4,
            dataLabels: {
                enabled: true,
                format: "{point.name} — {y}%",
                softConnector: true
            }
        }
    },
    series: [
        {
            type: "pyramid",
            name: "Teams",
            data: [
                [
                    "Reactive",
                    58
                ],
                [
                    "Defined",
                    26
                ],
                [
                    "Quantified",
                    11
                ],
                [
                    "Optimising",
                    5
                ]
            ]
        }
    ]
});

// 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 funnel & pyramid charts. See the full Highcharts API for everything else.

Option	Type	Default	Description
`chart.type`	"funnel" \| "pyramid"	—	Registered by mates-charts (Tier A) or highcharts/modules/funnel.
`plotOptions.funnel.neckWidth / neckHeight`	string \| number	30% / 25%	Shape of the transition between stages.
`plotOptions.funnel.borderRadius`	number	0	Rounds stage corners.
`plotOptions.funnel.dataLabels.softConnector`	boolean	true	Curved connector lines between labels and stages.
`series[].reversed`	boolean	false	Invert stage order top-to-bottom.