components chart

components/chart

Import: import { ChartScript, chartOptions, Chart } from "@tundralibs/ui/chart"

Rendered in every variant on the catalogue (deno task build:demos, then demo/index.html). Guides: Getting started · rAPId integration · Theming.

Functions

ChartScript

ChartScript(): Html

The pinned, integrity-checked, deferred <script> for a static page.

chartOptions

chartOptions(props: ChartProps): Obj

The ApexCharts options object a Chart renders with — exported so a test or a custom partial can inspect exactly what the props produce.

Chart

Chart(props: ChartProps): Html

An ApexCharts chart. Renders an empty .chart box carrying the options as JSON; chart.js draws it, follows the page's light/dark mode, and re-inits after a rAPId swap. See APEXCHARTS for loading the engine.

Types

ChartType

Every chart.type ApexCharts ${APEXCHARTS.version} renders.

• "line"
• "area"
• "bar"
• "pie"
• "donut"
• "radialBar"
• "scatter"
• "bubble"
• "heatmap"
• "candlestick"
• "boxPlot"
• "violin"
• "histogram"
• "radar"
• "polarArea"
• "rangeBar"
• "rangeArea"
• "waterfall"
• "dumbbell"
• "streamgraph"
• "raincloud"
• "treemap"
• "unit"
• "waffle"
• "sunburst"
• "funnel"
• "pyramid"
• "gauge"

ChartSeries

One axis series: { name, data } where data is numbers, [x, y] pairs, or { x, y } points (y an array for candlestick/boxPlot/ range types). Circular types (pie, donut, radialBar, polarArea, gauge, waffle) take a plain number array plus labels.

• typeOperator
• typeOperator

ChartProps

Prop	Type	Required	Description
id	string
type	ChartType	yes
series	ChartSeries	yes
categories	typeOperator		X-axis categories for axis charts.
labels	typeOperator		Slice labels for circular charts.
height	`number	string`
title	string
stacked	boolean
horizontal	boolean		Horizontal bars.
sparkline	boolean		Sparkline: no axes, grid, legend or toolbar — for a Stat tile.
toolbar	boolean		ApexCharts' zoom/export toolbar. @default false
options	Readonly		Anything else, verbatim ApexCharts options (apexcharts.com/docs/ options) — deep-merged over what the props above produce, so a key here always wins. Colours, fonts and light/dark mode come from the library's tokens (chart.css maps --apx-* to them) and should not normally be set.
attrs	Attrs

Constants

• APEXCHARTS: { version: string; src: string; integrity: string } — The one charting engine this library supports: ApexCharts, pinned. It is NOT bundled (§8: a small, stable set of file paths) — a page adds it with ChartScript() (static HTML) or createCoreTemplate({ scripts: [APEXCHARTS] }) (a rAPId app), and chart.js (this component's behaviour script) renders every [data-chart] it finds once window.ApexCharts exists — a silent no-op on a page that never loaded the library. Bump the version here and nowhere else; the integrity hash is the sha384 of the file at that exact URL (openssl dgst -sha384 -binary \| base64).
• chartTypes: typeOperator

Usage

Each example as the rAPId call and the HTML it renders — the markup a plain page writes by hand. Icons are inline SVG in the real output; they are shortened to <svg …>…</svg> here.

A revenue area chart

Add ChartScript() once per page (or pass APEXCHARTS to createCoreTemplate({ scripts })); the engine draws on the library's tokens and follows dark mode.

html`${ChartScript()}${
  Chart({
    id: "revenue",
    type: "area",
    series: [{ name: "Revenue", data: [12, 19, 14, 22, 28] }],
    categories: ["May", "Jun", "Jul", "Aug", "Sep"],
  })
}`

<script src="https://cdn.jsdelivr.net/npm/apexcharts@7.4.0/dist/apexcharts.min.js" integrity="sha384-fnhrfzODrKsQTTXTYoDIc5f/SIP1KuiO4hz6PmkcIBHYVaAj8QpSOtByqodkU2iO" crossorigin="anonymous" defer></script>
<div class="chart" data-chart="{&quot;chart&quot;:{&quot;type&quot;:&quot;area&quot;,&quot;height&quot;:240,&quot;stacked&quot;:false,&quot;toolbar&quot;:{&quot;show&quot;:false},&quot;sparkline&quot;:{&quot;enabled&quot;:false}},&quot;series&quot;:[{&quot;name&quot;:&quot;Revenue&quot;,&quot;data&quot;:[12,19,14,22,28]}],&quot;xaxis&quot;:{&quot;categories&quot;:[&quot;May&quot;,&quot;Jun&quot;,&quot;Jul&quot;,&quot;Aug&quot;,&quot;Sep&quot;]}}" data-chart-type="area" id="revenue"></div>

CSS hooks

Classes defined by components/chart/chart.css — structural, token-driven; override from an unlayered stylesheet (see Theming):

.apexcharts-menu, .apexcharts-menu-item, .apexcharts-tooltip, .apexcharts-tooltip-title, .apexcharts-xaxistooltip, .apexcharts-yaxistooltip, .chart

Behaviour

components/chart/chart.js ships in ui.js (delegated on document, re-initialised after a rAPId swap).

Attributes it reads or writes: data-chart, data-chart-initialized, data-theme.

Events: rapid:swapped.