sy-stem-leaf-chart
Stem Leaf
Read a distribution while retaining raw values.
sy-stem-leaf-chart
Inspect the digit distribution of a small numeric sample.
Choose the digit split and rounding unit first. Use Histogram for very large samples.
Base chart tier: Community. Features such as additional renderers and custom branding have separate entitlement requirements.
| Input | Data description |
|---|---|
values | An array of raw numeric samples, displayed as stems and leaves. |
- Run in Components
Change options and view framework-specific code
- Shared installation and integration
Complete implementation example
<div id="chart-container" style="width: 100%; min-width: 0;"></div>
<script type="module">
import { defineCustomElement as define0 } from '@syidax/advanced/components/sy-stem-leaf-chart.js';
define0();
const specs = [
{
"id": "example-chart",
"tag": "sy-stem-leaf-chart",
"props": {
"engine": "standard",
"values": [23, 25, 28, 29, 30, 31, 31, 32, 32, 33, 34, 34, 35, 35, 36, 37, 38, 39, 42, 45, 48, 52],
"width": 640,
"height": 360,
"brandPosition": "bottom-right",
"brandLogo": ""
}
}
];
const container = document.querySelector('#chart-container');
const elements = specs.map(({ tag, id, props }) => {
const element = document.createElement(tag);
element.id = id;
Object.assign(element, props);
element.setAttribute('aria-label', 'stem-leaf example chart');
return element;
});
container.replaceChildren(...elements);
const chart = elements.at(-1);
const onEvent = event => {
console.log('pointClick', event.detail);
};
chart.addEventListener('pointClick', onEvent);
const observer = new ResizeObserver(([entry]) => {
const width = Math.max(160, Math.floor(entry.contentRect.width));
elements.forEach(element => { element.width = width; });
});
observer.observe(container);
// In an SPA, call this function when the view is disposed.
function disposeChart() {
observer.disconnect();
chart.removeEventListener('pointClick', onEvent);
container.replaceChildren();
}
</script>Properties
values
An array of raw numeric samples, displayed as stems and leaves.
| Item | Value |
|---|---|
| JavaScript property | values |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | StemLeafValues |
| Default | [] |
- StemLeafValues
Type definition
width
Chart width in pixels. If the container width changes, update width from a ResizeObserver.
| Item | Value |
|---|---|
| JavaScript property | width |
| HTML attribute | width |
| Type | number |
| Default | 520 |
height
Chart height in pixels. Allow space for axes, titles, and the legend.
| Item | Value |
|---|---|
| JavaScript property | height |
| HTML attribute | height |
| Type | number |
| Default | 400 |
brandLogo
The default is the Syidax symbol and wordmark. With the Pro chart.branding entitlement, set none to remove it or provide a PNG, JPEG, or WebP data URL to replace it.
| Item | Value |
|---|---|
| JavaScript property | brandLogo |
| HTML attribute | brand-logo |
| Type | string |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
brandPosition
The corner where the logo is anchored. Community and Pro both support all four corners, using the same position on screen and in image exports.
| Item | Value |
|---|---|
| JavaScript property | brandPosition |
| HTML attribute | brand-position |
| Type | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' |
| Default | 'bottom-right' |
| Allowed values | top-left, top-right, bottom-left, bottom-right |
unit
Stem unit — one stem spans this much (default 10: stems are the tens digit).
| Item | Value |
|---|---|
| JavaScript property | unit |
| HTML attribute | unit |
| Type | number |
| Default | 10 |
split
1 (default) or 2: each stem splits into 0–4 / 5–9 half-rows.
| Item | Value |
|---|---|
| JavaScript property | split |
| HTML attribute | split |
| Type | 1 | 2 |
| Default | 1 |
color
Ink colour (single CSS colour / array / comma string — first colour wins).
| Item | Value |
|---|---|
| JavaScript property | color |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | string | ReadonlyArray<string> |
| Default | '#111827' |
activeColor
Accent for the hovered/focused leaf.
| Item | Value |
|---|---|
| JavaScript property | activeColor |
| HTML attribute | active-color |
| Type | string |
| Default | '#2563eb' |
showKey
Show the reading key (2 | 3 = 23) under the plot.
| Item | Value |
|---|---|
| JavaScript property | showKey |
| HTML attribute | show-key |
| Type | boolean |
| Default | true |
chartTitle
The title inside the chart. Explain the data's unit and meaning alongside it.
| Item | Value |
|---|---|
| JavaScript property | chartTitle |
| HTML attribute | chart-title |
| Type | string |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
chartSubtitle
The subtitle inside the chart.
| Item | Value |
|---|---|
| JavaScript property | chartSubtitle |
| HTML attribute | chart-subtitle |
| Type | string |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
tooltipShow
Whether to display the built-in tooltip.
| Item | Value |
|---|---|
| JavaScript property | tooltipShow |
| HTML attribute | tooltip-show |
| Type | boolean |
| Default | true |
tooltipFormat
Pass as a JavaScript property. type: (leaf: StemLeafPointEventDetail) => string.
| Item | Value |
|---|---|
| JavaScript property | tooltipFormat |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | (leaf: StemLeafPointEventDetail) => string |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- StemLeafPointEventDetail
Type definition
tooltip
Rich tooltip configuration object (family mirror). Property-only.
| Item | Value |
|---|---|
| JavaScript property | tooltip |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | StemLeafTooltipInput |
| Default | undefined |
| Literals in the type | auto, off |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- StemLeafTooltipInput
Type definition
enableMouseTracking
Set as an HTML attribute or JavaScript property. type: boolean.
| Item | Value |
|---|---|
| JavaScript property | enableMouseTracking |
| HTML attribute | enable-mouse-tracking |
| Type | boolean |
| Default | true |
zoom
Zoom (Storybook parity, 2026-09-10) — the shared zoom surface as a VIEWPORT zoom: the plot area of the stems and leaves (the chart box minus the title band, the margins and the key band) is the plot, x 0 → 1 left to right and y 0 → 1 bottom to top. 'x' | 'y' | 'xy' | true (x) enable the drag rectangle, the pan, Ctrl + wheel, the pinch and the keyboard (+ / - / Escape); an object refines the switches. Off by default; zoomTo / zoomBy / panBy / resetZoom work regardless.
| Item | Value |
|---|---|
| JavaScript property | zoom |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | CartesianZoomInput |
| Default | undefined |
| Literals in the type | auto, off, true, false, x, y, xy, inside |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- CartesianZoomInput
Type definition
engine
Renderer selection: auto, standard, or pro. Engine selection is separate from permission to use a Pro chart type.
| Item | Value |
|---|---|
| JavaScript property | engine |
| HTML attribute | engine |
| Type | StemLeafEngineMode |
| Default | 'auto' |
| Allowed values | auto, standard, pro |
- StemLeafEngineMode
Type definition
streamSource
A stream source for live data. Check the contract for the specific type.
| Item | Value |
|---|---|
| JavaScript property | streamSource |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | StemLeafStreamSource |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- StemLeafStreamSource
Type definition
streamWindow
The streaming data range to keep visible.
| Item | Value |
|---|---|
| JavaScript property | streamWindow |
| HTML attribute | stream-window |
| Type | number |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
streamMax
The maximum number of streaming data points to retain.
| Item | Value |
|---|---|
| JavaScript property | streamMax |
| HTML attribute | stream-max |
| Type | number |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
animated
Whether to animate initial display and data changes.
| Item | Value |
|---|---|
| JavaScript property | animated |
| HTML attribute | animate |
| Type | boolean |
| Default | false |
animationDuration
Animation duration in milliseconds.
| Item | Value |
|---|---|
| JavaScript property | animationDuration |
| HTML attribute | animation-duration |
| Type | number |
| Default | 600 |
animationEasing
Allowed values: linear, ease-out, ease-in, ease-in-out. Default: 'ease-out'.
| Item | Value |
|---|---|
| JavaScript property | animationEasing |
| HTML attribute | animation-easing |
| Type | StemLeafEasing |
| Default | 'ease-out' |
| Allowed values | linear, ease-out, ease-in, ease-in-out |
- StemLeafEasing
Type definition
animationType
Allowed values: initial, update. Default: undefined.
| Item | Value |
|---|---|
| JavaScript property | animationType |
| HTML attribute | animation-type |
| Type | StemLeafAnimationType |
| Default | undefined |
| Allowed values | initial, update |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- StemLeafAnimationType
Type definition
Events
rendered
Emits rendering results in detail when chart drawing completes.
Event name: rendered. Names are case-sensitive. Read the payload from detail on CustomEvent<StemLeafRenderResult & { tier: StemLeafEngineTier }>.
chart.addEventListener('rendered', event => {
console.log(event.detail); // StemLeafRenderResult & { tier: StemLeafEngineTier }
});- StemLeafRenderResult
Type definition
- StemLeafEngineTier
Type definition
pointClick
A point selection event. Read the selected data and index from CustomEvent.detail.
Event name: pointClick. Names are case-sensitive. Read the payload from detail on CustomEvent<StemLeafPointEventDetail>.
chart.addEventListener('pointClick', event => {
console.log(event.detail); // StemLeafPointEventDetail
});- StemLeafPointEventDetail
Type definition
pointHover
CustomEvent.detail type: StemLeafPointEventDetail | null. Event names are case-sensitive.
Event name: pointHover. Names are case-sensitive. Read the payload from detail on CustomEvent<StemLeafPointEventDetail | null>.
chart.addEventListener('pointHover', event => {
console.log(event.detail); // StemLeafPointEventDetail | null
});- StemLeafPointEventDetail
Type definition
pointContextMenu
CustomEvent.detail type: ChartPointContextMenuEventDetail<StemLeafPointEventDetail>. Event names are case-sensitive.
Event name: pointContextMenu. Names are case-sensitive. Read the payload from detail on CustomEvent<ChartPointContextMenuEventDetail<StemLeafPointEventDetail>>.
chart.addEventListener('pointContextMenu', event => {
console.log(event.detail); // ChartPointContextMenuEventDetail<StemLeafPointEventDetail>
});- ChartPointContextMenuEventDetail
Type definition
- StemLeafPointEventDetail
Type definition
appended
CustomEvent.detail type: { count: number }. Event names are case-sensitive.
Event name: appended. Names are case-sensitive. Read the payload from detail on CustomEvent<{ count: number }>.
chart.addEventListener('appended', event => {
console.log(event.detail); // { count: number }
});windowSlid
CustomEvent.detail type: { dropped: number }. Event names are case-sensitive.
Event name: windowSlid. Names are case-sensitive. Read the payload from detail on CustomEvent<{ dropped: number }>.
chart.addEventListener('windowSlid', event => {
console.log(event.detail); // { dropped: number }
});chartAnimationStart
CustomEvent.detail type: void. Event names are case-sensitive.
Event name: chartAnimationStart. Names are case-sensitive. Read the payload from detail on CustomEvent<void>.
chart.addEventListener('chartAnimationStart', event => {
console.log(event.detail); // void
});chartAnimationEnd
CustomEvent.detail type: void. Event names are case-sensitive.
Event name: chartAnimationEnd. Names are case-sensitive. Read the payload from detail on CustomEvent<void>.
chart.addEventListener('chartAnimationEnd', event => {
console.log(event.detail); // void
});chartAnimationInterrupted
CustomEvent.detail type: void. Event names are case-sensitive.
Event name: chartAnimationInterrupted. Names are case-sensitive. Read the payload from detail on CustomEvent<void>.
chart.addEventListener('chartAnimationInterrupted', event => {
console.log(event.detail); // void
});tooltipShow
Whether to display the built-in tooltip.
Event name: tooltipShow. Names are case-sensitive. Read the payload from detail on CustomEvent<StemLeafTooltipShowEventDetail>.
chart.addEventListener('tooltipShow', event => {
console.log(event.detail); // StemLeafTooltipShowEventDetail
});- StemLeafTooltipShowEventDetail
Type definition
tooltipHide
CustomEvent.detail type: void. Event names are case-sensitive.
Event name: tooltipHide. Names are case-sensitive. Read the payload from detail on CustomEvent<void>.
chart.addEventListener('tooltipHide', event => {
console.log(event.detail); // void
});tooltipAction
CustomEvent.detail type: StemLeafTooltipActionEventDetail. Event names are case-sensitive.
Event name: tooltipAction. Names are case-sensitive. Read the payload from detail on CustomEvent<StemLeafTooltipActionEventDetail>.
chart.addEventListener('tooltipAction', event => {
console.log(event.detail); // StemLeafTooltipActionEventDetail
});- StemLeafTooltipActionEventDetail
Type definition
zoomChange
Fired after every zoom change (drag / pan / wheel / pinch / keyboard / api / reset) with the new viewport windows.
Event name: zoomChange. Names are case-sensitive. Read the payload from detail on CustomEvent<CartesianZoomChangeEventDetail>.
chart.addEventListener('zoomChange', event => {
console.log(event.detail); // CartesianZoomChangeEventDetail
});- CartesianZoomChangeEventDetail
Type definition
Methods
redraw
Redraw the chart using its current data and options. Inspect the rendered result after the returned Promise resolves.
redraw(): Promise<StemLeafRenderResult>Return type: Promise<StemLeafRenderResult>. Call the method after element registration and await its Promise result.
- StemLeafRenderResult
Type definition
getActiveTier
An asynchronous method. Check the argument and return types below.
getActiveTier(): Promise<StemLeafEngineTier>Return type: Promise<StemLeafEngineTier>. Call the method after element registration and await its Promise result.
- StemLeafEngineTier
Type definition
setData
Replace the bar set.
setData(values: StemLeafValues): Promise<void>| Arguments | Type | Required |
|---|---|---|
values | StemLeafValues | Required |
Return type: Promise<void>. Call the method after element registration and await its Promise result.
- StemLeafValues
Type definition
appendPoint
Append one value to the stream. Check the argument type and the licensing requirements for streaming.
appendPoint(value: number): Promise<void>| Arguments | Type | Required |
|---|---|---|
value | number | Required |
Return type: Promise<void>. Call the method after element registration and await its Promise result.
appendBatch
Append multiple values to the stream. Check the argument type and the licensing requirements for streaming.
appendBatch(values: ReadonlyArray<number>): Promise<void>| Arguments | Type | Required |
|---|---|---|
values | ReadonlyArray<number> | Required |
Return type: Promise<void>. Call the method after element registration and await its Promise result.
shift
Drop the oldest streamed categories (the data boxes are not the stream).
shift(count?: number): Promise<void>| Arguments | Type | Required |
|---|---|---|
count | number | Optional |
Return type: Promise<void>. Call the method after element registration and await its Promise result.
replace
Swap the streamed set (replace([]) clears it); the base values never leave. Without chart.streaming the dies upsert into the base like a batch (quietly: no appended, no binChanged, as a ring replace).
replace(values: ReadonlyArray<number>): Promise<void>| Arguments | Type | Required |
|---|---|---|
values | ReadonlyArray<number> | Required |
Return type: Promise<void>. Call the method after element registration and await its Promise result.
getStreamSource
The stream session's source (Chart Pro): like the stream methods it waits for a license still being confirmed.
getStreamSource(): Promise<StemLeafStreamSource | undefined>Return type: Promise<StemLeafStreamSource | undefined>. Call the method after element registration and await its Promise result.
- StemLeafStreamSource
Type definition
setAnimation
An asynchronous method. Check the argument and return types below.
setAnimation(options: { duration?: number; easing?: StemLeafEasing; enabled?: boolean; type?: StemLeafAnimationType }): Promise<void>| Arguments | Type | Required |
|---|---|---|
options | { duration?: number; easing?: StemLeafEasing; enabled?: boolean; type?: StemLeafAnimationType } | Required |
Return type: Promise<void>. Call the method after element registration and await its Promise result.
- StemLeafEasing
Type definition
- StemLeafAnimationType
Type definition
pauseAnimation
Pause the current animation.
pauseAnimation(): Promise<void>Return type: Promise<void>. Call the method after element registration and await its Promise result.
resumeAnimation
Resume a paused animation.
resumeAnimation(): Promise<void>Return type: Promise<void>. Call the method after element registration and await its Promise result.
replayAnimation
Replay the initial sweep from min → value(s). No-op when animation is off / reduced.
replayAnimation(): Promise<void>Return type: Promise<void>. Call the method after element registration and await its Promise result.
hitTestLeaf
Stem-leaf-only — hit-test the leaf at canvas-relative coordinates.
hitTestLeaf(cssX: number, cssY: number): Promise<{ sourceIndex: number; value: number; stemLabel: string; digit: number } | null>| Arguments | Type | Required |
|---|---|---|
cssX | number | Required |
cssY | number | Required |
Return type: Promise<{ sourceIndex: number; value: number; stemLabel: string; digit: number } | null>. Call the method after element registration and await its Promise result.
showTooltipAtLeaf
Stem-leaf-only — programmatic tooltip open on a leaf by source index.
showTooltipAtLeaf(sourceIndex: number): Promise<StemLeafPointEventDetail | null>| Arguments | Type | Required |
|---|---|---|
sourceIndex | number | Required |
Return type: Promise<StemLeafPointEventDetail | null>. Call the method after element registration and await its Promise result.
- StemLeafPointEventDetail
Type definition
hideTooltip
Close the currently visible tooltip.
hideTooltip(): Promise<void>Return type: Promise<void>. Call the method after element registration and await its Promise result.
zoomTo
Zoom to explicit viewport windows: x / y as { min, max } or [min, max] over 0..1 (null clears that orientation).
zoomTo(request: CartesianZoomRequest): Promise<CartesianZoomChangeEventDetail | null>| Arguments | Type | Required |
|---|---|---|
request | CartesianZoomRequest | Required |
Return type: Promise<CartesianZoomChangeEventDetail | null>. Call the method after element registration and await its Promise result.
- CartesianZoomChangeEventDetail
Type definition
- CartesianZoomRequest
Type definition
zoomBy
Scale the current windows by factor (< 1 zooms in) around anchorFraction (0..1, default centre).
zoomBy(factor: number, anchorFraction?: number): Promise<CartesianZoomChangeEventDetail | null>| Arguments | Type | Required |
|---|---|---|
factor | number | Required |
anchorFraction | number | Optional |
Return type: Promise<CartesianZoomChangeEventDetail | null>. Call the method after element registration and await its Promise result.
- CartesianZoomChangeEventDetail
Type definition
panBy
Slide the zoomed windows by viewport units ({ x?, y? }, 1 = the whole plot); a no-op at the full extent.
panBy(delta: { x?: number; y?: number }): Promise<CartesianZoomChangeEventDetail | null>| Arguments | Type | Required |
|---|---|---|
delta | { x?: number; y?: number } | Required |
Return type: Promise<CartesianZoomChangeEventDetail | null>. Call the method after element registration and await its Promise result.
- CartesianZoomChangeEventDetail
Type definition
resetZoom
Reset the zoomed or panned range to the original data range.
resetZoom(): Promise<CartesianZoomChangeEventDetail | null>Return type: Promise<CartesianZoomChangeEventDetail | null>. Call the method after element registration and await its Promise result.
- CartesianZoomChangeEventDetail
Type definition
getZoom
Read the current zoom range. Check the return type's nullability and the range for each axis.
getZoom(): Promise<CartesianZoomState | null>Return type: Promise<CartesianZoomState | null>. Call the method after element registration and await its Promise result.
- CartesianZoomState
Type definition
getZoomExtent
The full extent (0..1 on both orientations, key '0').
getZoomExtent(request?: CartesianZoomExtentRequest): Promise<CartesianZoomExtentDetail | null>| Arguments | Type | Required |
|---|---|---|
request | CartesianZoomExtentRequest | Optional |
Return type: Promise<CartesianZoomExtentDetail | null>. Call the method after element registration and await its Promise result.
- CartesianZoomExtentDetail
Type definition
- CartesianZoomExtentRequest
Type definition
getEngineStatus
Requested engine vs what runs, and why (CHART-ADD-08): always Standard (this type has no WebGPU renderer); read without side effects, never consults the license.
getEngineStatus(): Promise<ChartEngineStatus>Return type: Promise<ChartEngineStatus>. Call the method after element registration and await its Promise result.
- ChartEngineStatus
Type definition