Area

Area charts fill the region between the line and the axis — the same data as a line chart, with volume emphasised. Stack them to show composition over time.

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: "area"
    },
    title: {
        text: "Signups"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    xAxis: {
        categories: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun"
        ]
    },
    yAxis: {
        title: {
            text: "Users"
        }
    },
    plotOptions: {
        area: {
            fillOpacity: 0.35,
            lineWidth: 1.5,
            marker: {
                enabled: false
            }
        }
    },
    series: [
        {
            type: "area",
            name: "Users",
            data: [
                120,
                190,
                160,
                240,
                220,
                310
            ]
        }
    ]
});

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

Live examples

Simple area Highcharts demo ↗

fillOpacity softens the fill; the line on top keeps the trend legible.

TypeScript

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

const chart = chartAtom({
    chart: {
        type: "area"
    },
    title: {
        text: "Signups"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    xAxis: {
        categories: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun"
        ]
    },
    yAxis: {
        title: {
            text: "Users"
        }
    },
    plotOptions: {
        area: {
            fillOpacity: 0.35,
            lineWidth: 1.5,
            marker: {
                enabled: false
            }
        }
    },
    series: [
        {
            type: "area",
            name: "Users",
            data: [
                120,
                190,
                160,
                240,
                220,
                310
            ]
        }
    ]
});

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

Smooth area (areaspline) Highcharts demo ↗

chart.type = "areaspline" — the smooth-spline interpolation with the area fill.

TypeScript

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

const chart = chartAtom({
    chart: {
        type: "areaspline"
    },
    title: {
        text: "Fruit consumption"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: true
    },
    xAxis: {
        categories: [
            "Apples",
            "Pears",
            "Plums",
            "Bananas",
            "Oranges"
        ]
    },
    yAxis: {
        title: {
            text: "kg / week"
        }
    },
    plotOptions: {
        areaspline: {
            fillOpacity: 0.4,
            lineWidth: 1.5,
            marker: {
                enabled: false
            }
        }
    },
    series: [
        {
            type: "areaspline",
            name: "2025",
            data: [
                6,
                4,
                3,
                7,
                5
            ]
        },
        {
            type: "areaspline",
            name: "2026",
            data: [
                8,
                5,
                4,
                9,
                6
            ]
        }
    ]
});

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

Stacked area (composition) Highcharts demo ↗

stacking = "normal" piles channels on top of each other; the total height is the overall trend.

TypeScript

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

const chart = chartAtom({
    chart: {
        type: "area"
    },
    title: {
        text: "Traffic by channel"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: true
    },
    xAxis: {
        categories: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun"
        ]
    },
    yAxis: {
        title: {
            text: "Sessions"
        }
    },
    tooltip: {
        shared: true
    },
    plotOptions: {
        area: {
            stacking: "normal",
            fillOpacity: 0.35,
            lineWidth: 1.5
        }
    },
    series: [
        {
            type: "area",
            name: "Organic",
            data: [
                32,
                40,
                38,
                52,
                49,
                60
            ]
        },
        {
            type: "area",
            name: "Paid",
            data: [
                18,
                15,
                22,
                20,
                28,
                25
            ]
        },
        {
            type: "area",
            name: "Referral",
            data: [
                8,
                10,
                9,
                14,
                12,
                15
            ]
        }
    ]
});

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

Percentage-stacked area Highcharts demo ↗

stacking = "percent" normalises every x position to a 100% share — the composition story without absolute numbers.

TypeScript

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

const chart = chartAtom({
    chart: {
        type: "area"
    },
    title: {
        text: "Browser share"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: true
    },
    xAxis: {
        categories: [
            "2019",
            "2020",
            "2021",
            "2022",
            "2023",
            "2024"
        ]
    },
    yAxis: {
        labels: {
            format: "{value}%"
        },
        max: 100,
        title: {
            text: ""
        }
    },
    tooltip: {
        shared: true,
        valueSuffix: "%"
    },
    plotOptions: {
        area: {
            stacking: "percent",
            fillOpacity: 0.4,
            lineWidth: 1.5
        }
    },
    series: [
        {
            type: "area",
            name: "Chrome",
            data: [
                48,
                55,
                62,
                66,
                65,
                64
            ]
        },
        {
            type: "area",
            name: "Safari",
            data: [
                20,
                19,
                18,
                19,
                20,
                21
            ]
        },
        {
            type: "area",
            name: "Firefox",
            data: [
                16,
                13,
                10,
                8,
                7,
                6
            ]
        },
        {
            type: "area",
            name: "Other",
            data: [
                16,
                13,
                10,
                7,
                8,
                9
            ]
        }
    ]
});

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

Negative values Highcharts demo ↗

Areas render above and below the zero line; plotOptions.series.threshold controls where the fill anchors.

TypeScript

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

const chart = chartAtom({
    chart: {
        type: "area"
    },
    title: {
        text: "Temperature deviation"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    xAxis: {
        categories: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug"
        ]
    },
    yAxis: {
        title: {
            text: "°C vs average"
        }
    },
    plotOptions: {
        area: {
            fillOpacity: 0.4,
            lineWidth: 1.5,
            marker: {
                enabled: false
            }
        }
    },
    series: [
        {
            type: "area",
            name: "Deviation",
            data: [
                -2.4,
                -1.1,
                0.6,
                1.8,
                2.9,
                1.2,
                -0.4,
                -1.6
            ]
        }
    ]
});

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

Option	Type	Default	Description
`chart.type`	"area" \| "areaspline"	—	Filled with straight segments (area) or smooth curves (areaspline).
`plotOptions.area.stacking`	undefined \| "normal" \| "percent"	undefined	Stack values or normalise to percentage share.
`plotOptions.area.fillOpacity`	number	0.75	Transparency of the filled region (0–1).
`plotOptions.area.fillColor`	string	series colour	Override the fill colour (gradients allowed).
`plotOptions.series.threshold`	number	0	Baseline the fill draws down to — set negative for negative-value charts.
`xAxis.tickInterval`	number	auto	Label every Nth category on dense axes.
`legend.enabled`	boolean	true	Show the series legend.