Live preview

Live

Bar chart

Compare planned and actual output by category.

NxBarChart

Line chart

Show change over an ordered sequence.

NxLineChart

Donut chart

Summarize a part-to-whole distribution.

NxDonutChart

Running4255%
Idle2127%
Setup1418%

Gauge

Track one KPI against threshold bands.

NxGauge

Heatmap

Compare two categorical dimensions by intensity.

NxHeatmap

Sankey

Trace volume through a directed flow.

NxSankey

Copyable source

Code example

TSX

import {
    NxBarChart,
    NxDonutChart,
    NxGauge,
    NxHeatmap,
    NxLineChart,
    NxSankey,
} from "@nexia/sdk/host";

const data = [
    { day: "Mon", planned: 112, actual: 104 },
    { day: "Tue", planned: 118, actual: 121 },
    { day: "Wed", planned: 124, actual: 116 },
];
const series = [
    { key: "planned", label: "Planned", color: "#3987e5" },
    { key: "actual", label: "Actual", color: "#199e70" },
];

export function AnalyticsChartsExample() {
    return (
        <div className="grid gap-5 lg:grid-cols-2">
            <NxBarChart
                data={data}
                xKey="day"
                series={series}
                showLegend
                height={260}
                ariaLabel="Production comparison"
            />
            <NxLineChart
                data={data}
                xKey="day"
                series={series}
                showDots
                showLegend
                height={260}
                ariaLabel="Production trend"
            />
            <NxDonutChart
                segments={[
                    {
                        key: "running",
                        label: "Running",
                        value: 42,
                        color: "#3987e5",
                    },
                    { key: "idle", label: "Idle", value: 21, color: "#199e70" },
                ]}
                centerLabel="machines"
                height={260}
                ariaLabel="Machine states"
            />
            <NxGauge
                value={87}
                label="OEE"
                unit="%"
                height={260}
                ariaLabel="Overall equipment effectiveness"
            />
            <NxHeatmap
                data={[
                    { x: "Mon", y: "Line A", value: 86 },
                    { x: "Tue", y: "Line A", value: 92 },
                ]}
                xCategories={["Mon", "Tue"]}
                yCategories={["Line A"]}
                min={60}
                max={100}
                showValues
                height={260}
                ariaLabel="Line utilization"
            />
            <NxSankey
                nodes={[
                    { id: "raw", label: "Raw" },
                    { id: "finished", label: "Finished" },
                ]}
                links={[{ source: "raw", target: "finished", value: 119 }]}
                height={260}
                ariaLabel="Material flow"
            />
        </div>
    );
}12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485