Data Module

The data module turns CSV strings, HTML tables and async payloads into series — no manual parsing. Everything still lands in the same chartAtom, so live sources compose with the reactive API.

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"
    },
    title: {
        text: "Signups from CSV"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: true
    },
    data: {
        csv: "Month,Signups,Upgrades\nJan,120,14\nFeb,158,22\nMar,174,19\nApr,201,31",
        delimiter: ","
    },
    yAxis: {
        title: {
            text: "Count"
        }
    }
});

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

Live examples

Load from CSV Highcharts demo ↗

Pass a CSV string (or URL) to data.csv; delimiter and firstRowAsNames are configurable. Series materialise automatically.

Module setup. This example needs one extra Highcharts module:

import "highcharts/modules/data";

TypeScript

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

const chart = chartAtom({
    chart: {
        type: "column"
    },
    title: {
        text: "Signups from CSV"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: true
    },
    data: {
        csv: "Month,Signups,Upgrades\nJan,120,14\nFeb,158,22\nMar,174,19\nApr,201,31",
        delimiter: ","
    },
    yAxis: {
        title: {
            text: "Count"
        }
    }
});

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

Load from an HTML table

data.table reads any <table> on the page — handy for server-rendered rows the chart should visualise in place.

Module setup. This example needs one extra Highcharts module:

import "highcharts/modules/data";

TypeScript

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

const chart = chartAtom({
    chart: {
        type: "bar"
    },
    title: {
        text: "Latency from table"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    data: {
        table: "latency-table"
    },
    yAxis: {
        title: {
            text: "ms"
        }
    }
});

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

Async source (fetch + atom)

Fetch JSON anywhere (mates fetchAction works too), then chart.set() — the chart animates the arrival. Combine with loading states from ordinary atoms.

TypeScript

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

const chart = chartAtom({
    chart: {
        type: "line"
    },
    title: {
        text: "Weekly installs (async)"
    },
    credits: {
        enabled: false
    },
    colors: [
        "#00968c",
        "#06b6d4",
        "#d97706",
        "#7c3aed",
        "#dc2626",
        "#16a34a",
        "#0172ad",
        "#9333ea"
    ],
    legend: {
        enabled: false
    },
    xAxis: {
        categories: [
            "W1",
            "W2",
            "W3",
            "W4",
            "W5",
            "W6"
        ]
    },
    yAxis: {
        title: {
            text: "installs"
        }
    },
    plotOptions: {
        series: {
            marker: {
                enabled: false
            }
        }
    },
    series: [
        {
            type: "line",
            name: "Installs",
            data: [
                320,
                410,
                380,
                460,
                520,
                590
            ]
        }
    ]
});

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

Option	Type	Default	Description
`data.csv`	string	—	CSV string or URL; requires highcharts/modules/data.
`data.delimiter`	string	auto	Field delimiter — ",", ";", tab…
`data.firstRowAsNames`	boolean	true	Treat the first row as series names.
`data.table`	string	—	DOM id of an HTML table to parse.
`data.startRow / endRow`	number	—	Slice large sources.
`data.complete`	Function	—	Post-process the parsed series before charting.
`series[].data (async)`	any	—	Set atom-side after fetch — no module needed.