3D Charts

chart.options3d enables perspective on any cartesian or pie chart: alpha/beta tilt, depth extrusion and view distance. Requires the highcharts-3d module (one import).

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: "column",
        options3d: {
            enabled: true,
            alpha: 12,
            beta: 22,
            depth: 50,
            viewDistance: 25
        }
    },
    title: {
        text: "Storage by tier"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    xAxis: {
        categories: [
            "Hot",
            "Warm",
            "Cold"
        ]
    },
    yAxis: {
        title: {
            text: "TB"
        }
    },
    plotOptions: {
        column: {
            depth: 40,
            borderRadius: 3
        }
    },
    series: [
        {
            type: "column",
            name: "TB",
            data: [
                42,
                87,
                310
            ]
        }
    ]
});

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

Live examples

3D columns Highcharts demo ↗

options3d with alpha (vertical tilt) and beta (horizontal rotation); depth extrudes each column along the z-axis.

TypeScript

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

const chart = chartAtom({
    chart: {
        type: "column",
        options3d: {
            enabled: true,
            alpha: 12,
            beta: 22,
            depth: 50,
            viewDistance: 25
        }
    },
    title: {
        text: "Storage by tier"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    xAxis: {
        categories: [
            "Hot",
            "Warm",
            "Cold"
        ]
    },
    yAxis: {
        title: {
            text: "TB"
        }
    },
    plotOptions: {
        column: {
            depth: 40,
            borderRadius: 3
        }
    },
    series: [
        {
            type: "column",
            name: "TB",
            data: [
                42,
                87,
                310
            ]
        }
    ]
});

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

3D pie Highcharts demo ↗

Pies gain depth and tilt; innerSize keeps the donut hole. Keep alpha small or slices occlude.

TypeScript

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

const chart = chartAtom({
    chart: {
        type: "pie",
        options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
        }
    },
    title: {
        text: "Sales by channel"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    plotOptions: {
        pie: {
            depth: 45,
            innerSize: "45%",
            dataLabels: {
                enabled: true,
                format: "{point.name} {y}%"
            }
        }
    },
    series: [
        {
            type: "pie",
            name: "Sales",
            data: [
                [
                    "Online",
                    44
                ],
                [
                    "Retail",
                    31
                ],
                [
                    "Partners",
                    25
                ]
            ]
        }
    ]
});

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

3D donut (multiple rings)

Two pie series at different sizes form concentric 3D rings — inner and outer composition.

TypeScript

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

const chart = chartAtom({
    chart: {
        type: "pie",
        options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
        }
    },
    title: {
        text: "Users by device tier"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: true
    },
    plotOptions: {
        pie: {
            depth: 35,
            allowPointSelect: true
        }
    },
    series: [
        {
            type: "pie",
            name: "Inner",
            size: "45%",
            depth: 20,
            data: [
                [
                    "Mobile",
                    58
                ],
                [
                    "Desktop",
                    42
                ]
            ]
        },
        {
            type: "pie",
            name: "Outer",
            size: "80%",
            innerSize: "55%",
            depth: 40,
            data: [
                [
                    "iOS",
                    34
                ],
                [
                    "Android",
                    24
                ],
                [
                    "macOS",
                    22
                ],
                [
                    "Windows",
                    20
                ]
            ]
        }
    ]
});

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

3D bubbles Highcharts demo ↗

Bubbles with z-depth — the z-axis adds another dimension to the cloud.

TypeScript

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

const chart = chartAtom({
    chart: {
        type: "bubble",
        options3d: {
            enabled: true,
            alpha: 15,
            beta: 15,
            depth: 250,
            viewDistance: 5
        }
    },
    title: {
        text: "Clusters in 3D"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: true
    },
    xAxis: {
        min: 0,
        max: 10
    },
    yAxis: {
        min: 0,
        max: 10
    },
    zAxis: {
        min: 0,
        max: 10
    },
    plotOptions: {
        bubble: {
            minSize: 6,
            maxSize: 30
        }
    },
    series: [
        {
            type: "bubble",
            name: "Cluster A",
            data: [
                [
                    2,
                    3,
                    2,
                    5
                ],
                [
                    3,
                    4,
                    4,
                    8
                ],
                [
                    4,
                    2,
                    6,
                    4
                ],
                [
                    2,
                    5,
                    3,
                    6
                ]
            ]
        },
        {
            type: "bubble",
            name: "Cluster B",
            data: [
                [
                    7,
                    7,
                    5,
                    9
                ],
                [
                    8,
                    8,
                    7,
                    6
                ],
                [
                    6,
                    8,
                    3,
                    5
                ],
                [
                    8,
                    6,
                    4,
                    7
                ]
            ]
        }
    ]
});

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

Cylinder series Highcharts demo ↗

Rounded 3D columns — the cylinder series builds on highcharts-3d plus its own module.

Module setup. This example needs one extra Highcharts module:

import "highcharts/modules/cylinder";

TypeScript

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

const chart = chartAtom({
    chart: {
        type: "cylinder",
        options3d: {
            enabled: true,
            alpha: 12,
            beta: 22,
            depth: 50,
            viewDistance: 25
        }
    },
    title: {
        text: "Fuel levels"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    xAxis: {
        categories: [
            "Tank A",
            "Tank B",
            "Tank C"
        ]
    },
    yAxis: {
        title: {
            text: "litres"
        }
    },
    plotOptions: {
        cylinder: {
            depth: 45
        }
    },
    series: [
        {
            type: "cylinder",
            name: "Litres",
            data: [
                320,
                480,
                210
            ]
        }
    ]
});

// 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 3d charts charts. See the full Highcharts API for everything else.

Option	Type	Default	Description
`chart.options3d.enabled`	boolean	false	Requires the highcharts-3d module (import "highcharts/highcharts-3d").
`chart.options3d.alpha / beta`	number	0	Vertical tilt and horizontal rotation in degrees.
`chart.options3d.depth`	number	100	Total depth of the 3D scene.
`chart.options3d.viewDistance`	number	100	Perspective strength — smaller = more dramatic.
`plotOptions.column.depth`	number	25	Per-series extrusion depth.
`plotOptions.pie.depth`	number	0	Pie thickness in 3D.
`zAxis`	AxisOptions	—	Third value axis (3D bubbles).