@skdx/angular-charts 0.32.0 → 0.34.0

package/README.md

@@ -1,7 +1,7 @@
 # @skdx/angular-charts
 
-Eighteen SVG charts for angular. Plain SVG colored by `@skdx/tokens`; load
-`@skdx/tokens/css` once so the colors resolve.
+Nineteen SVG charts for Angular. Plain SVG colored by `@skdx/tokens`; load `@skdx/tokens/css` once
+so the colors resolve.
 
 ```sh
 pnpm add @skdx/angular-charts @skdx/tokens
@@ -12,46 +12,101 @@ import { SkdxBarChartComponent } from '@skdx/angular-charts/bar';
 
 @Component({
   imports: [SkdxBarChartComponent],
-  template: `<skdx-bar-chart [series]="series" [categories]="['Q1', 'Q2', 'Q3']"></skdx-bar-chart>`,
+  template: `
+    <skdx-bar-chart
+      [series]="series"
+      [categories]="['Jan', 'Feb', 'Mar']"
+      [format]="{ style: 'currency', currency: 'USD', digits: 0 }"
+    ></skdx-bar-chart>
+  `,
 })
-export class Sales {
-  series = [{ name: 'Sales', data: [3, 5, 2] }];
+export class Revenue {
+  series = [{ name: 'MRR', data: [118_000, 124_500, 131_200] }];
 }
 ```
 
-Every chart takes `width`, `height` and `label` (the accessible name). Bar, line, area and radar
-take `series` (`{ name, data, color? }[]`) and `categories`; bar also takes `stacked`. Pie and
-funnel take `data` (`{ name, value, color? }[]`); pie also takes `innerRadius` (0 to 0.95) for a
-donut. Scatter takes `series` of `[x, y]` pairs. Sparkline takes `data` (`number[]`). Heatmap takes
-`rows`, `columns` and `data` (`number[][]`).
-
-Sankey takes `links` (`{ source, target, value }[]`). Treemap takes `data` like pie. Candlestick
-takes `data` as `{ label, open, high, low, close }[]`. Waterfall takes signed `data` deltas and an
-optional `total` label. Gantt takes `tasks` (`{ name, start, end }[]`) and an optional tick
-`format`. Boxplot takes `series` of raw samples. Sunburst takes `data` as a tree of
-`{ name, value?, children? }`. Chord takes `names` and a flow `matrix`. Map takes `features`
-(`{ name, value, geometry }[]` with GeoJSON Polygon or MultiPolygon geometry) and an optional
-`color`.
-Each mark carries a native `<title>` tooltip and a `data-skdx-part` attribute for styling.
-
-Every chart is also a secondary entry point (`@skdx/angular-charts/bar`, `/line`, … `/map`), so
-an app bundles only what it imports.
-
-## Options
-
-Every chart takes `legend` (a swatch row above the plot, off by default) and `tooltip` (a hover
-tooltip for the mark under the pointer, on by default; the native `<title>` stays regardless).
-Charts scale down with their container while keeping their aspect ratio.
-
-| Chart                 | Option                       | Effect                                                           |
-| --------------------- | ---------------------------- | ---------------------------------------------------------------- |
-| line, area, sparkline | `curve: 'monotone'`          | Smooth cubic segments that never overshoot the data              |
-| pie                   | `labels`                     | Name and share written on each slice                             |
-| radar                 | `normalize`                  | Each series scaled to its own maximum; rings read as percentages |
-| heatmap               | `diverging`, `negativeColor` | Split around zero, opacity by distance from zero                 |
-| waterfall             | `total`                      | Label for a closing bar showing the running total                |
-| gantt                 | `format`                     | Formats the time ticks, e.g. a timestamp as a date               |
-| candlestick           | `scale: 'log'`               | Logarithmic price axis with ticks at powers of ten               |
-| treemap               | nested `children`            | Branches outlined, children tiled inside                         |
-| sankey                | (always)                     | Links that would close a cycle are dropped                       |
-| map                   | `projection: 'mercator'`     | Mercator instead of equirectangular                              |
+Every chart takes `width`, `height`, `label` (the accessible name), `description`, `decorative`,
+`legend`, `tooltip`, `format`, `palette`, `hiddenSeries`, `loading`, `error` and `emptyMessage`.
+Bar, line and area take `series` (`{ name, data, type?, axis?, curve?, dash?, markers?, stack? }[]`,
+or `{ type: 'range', name, low, high }`) and `categories` (strings, numbers or dates). Pie, funnel
+and radial take `data` (`{ name, value, color? }[]`). Scatter takes `series` of `[x, y]` pairs or
+`[x, y, size]` triples. Sparkline takes `data` (`(number | null)[]`). Heatmap takes `rows`, `columns`
+and `data` (`(number | null)[][]`), or `calendar` (`{ date, value }[]`). Radar takes `series` and
+`categories`.
+
+Sankey takes `links` (`{ source, target, value }[]`). Treemap and sunburst take `data` as a tree of
+`{ name, value?, children? }`. Candlestick takes `data` as `{ label, open, high, low, close, volume? }[]`.
+Waterfall takes signed `data` deltas and an optional `total` label. Gantt takes `tasks`
+(`{ name, start, end, group? }[]`). Boxplot takes `series` of raw samples. Chord takes `names` and a
+flow `matrix`. Map takes `features` (`{ name, value, geometry }[]` with GeoJSON Polygon or
+MultiPolygon geometry). `null` and `NaN` values are gaps; an empty chart renders "No data available".
+
+Every chart also takes `animate` (fade in and transition on change; `true` is 300 ms, a number sets
+the duration, off under `prefers-reduced-motion` and above 1500 shapes) and `responsive` (lay out
+at the container's width so text keeps its size). Cartesian charts take `xAxis.type: 'time' |
+'linear'` to place numeric or date categories proportionally.
+
+Every mark carries a native `<title>` tooltip and a `data-skdx-part` attribute for styling. The
+full option reference, the mixed-series (bar + line + range) cartesian model, references, zoom,
+brush, crosshair, histogram, formatting and the accessibility contract are documented once in the
+[repository README](../../README.md); the decisions behind them in [CHARTS.md](../../CHARTS.md).
+
+## Interaction
+
+Every chart is keyboard accessible: it takes focus, arrow keys step through the marks with a focus
+ring and tooltip, Home/End jump, Escape clears and Enter/Space clicks. Clicking a legend entry hides
+its series while colors stay stable. Bar, line, area and candlestick charts also zoom (wheel around
+the pointer, drag to pan, double-click to reset), brush (a range strip under the plot) and snap a
+shared tooltip to the nearest category (`crosshair`). Two fingers pinch-zoom on touch screens.
+
+| Capability          | Angular spelling                                        |
+| ------------------- | ------------------------------------------------------- |
+| item click          | `(itemClick)="onItem($event)"`                          |
+| legend toggles      | uncontrolled by default, or `[(hiddenSeries)]="hidden"` |
+| zoom                | `[zoomable]="true"`; `[(zoom)]="zoom"` for control      |
+| brush and crosshair | `[brush]="true"`, `[crosshair]="true"`                  |
+| motion and sizing   | `[animate]="true"`, `[responsive]="true"`               |
+
+## Example: an observability panel
+
+```ts
+import { Component, signal } from '@angular/core';
+
+import type { ChartItem, Zoom } from '@skdx/angular-charts';
+import { SkdxLineChartComponent } from '@skdx/angular-charts/line';
+
+@Component({
+  imports: [SkdxLineChartComponent],
+  template: `
+    <skdx-line-chart
+      label="p95 latency, last 24 hours"
+      [categories]="timestamps"
+      [xAxis]="{ format: { style: 'time' } }"
+      [format]="{ style: 'integer', unit: ' ms' }"
+      [series]="series"
+      [rightAxis]="{ format: { style: 'percent' }, max: 0.05 }"
+      [references]="[{ y: 300, label: 'SLA', variant: 'warning' }]"
+      [crosshair]="true"
+      [zoomable]="true"
+      [brush]="true"
+      [legend]="true"
+      [(zoom)]="zoom"
+      [(hiddenSeries)]="hidden"
+      (itemClick)="onItem($event)"
+    ></skdx-line-chart>
+  `,
+})
+export class LatencyPanel {
+  timestamps = timestamps;
+  series = [
+    { name: 'p95', data: points.p95 },
+    { name: 'p50', data: points.p50, dash: '4 3' },
+    { name: 'Error rate', type: 'bar' as const, data: points.errors, axis: 'right' as const },
+  ];
+  zoom = signal<Zoom | undefined>(undefined);
+  hidden = signal<string[] | undefined>(undefined);
+  onItem(item: ChartItem) {
+    console.log(item.series, item.category, item.value);
+  }
+}
+```

package/fesm2022/skdx-angular-charts-area.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
 import { computed, ChangeDetectionStrategy, Component } from '@angular/core';
-import { SkdxChartBase, layoutAreaChart, SkdxChartFrameComponent, SkdxChartLinesComponent } from '@skdx/angular-charts/internal';
+import { SkdxChartBase, layoutAreaChart, SkdxChartRootComponent } from '@skdx/angular-charts/internal';
 
 /*
  * Copyright (c) 2026 SkandaDX
  * This file is part of the SkandaDX organization.
  * Licensed under the MIT License. See LICENSE in the repository root.
  */
-/** A line chart with each series filled down to the zero baseline. */
+/** Filled, optionally stacked, areas down to zero; series may also be bars, lines or ranges. */
 class SkdxAreaChartComponent extends SkdxChartBase {
     constructor() {
         super(...arguments);
@@ -15,19 +15,19 @@ class SkdxAreaChartComponent extends SkdxChartBase {
         ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxAreaChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: SkdxAreaChartComponent, isStandalone: true, selector: "skdx-area-chart", usesInheritance: true, ngImport: i0, template: `
-    <skdx-chart-frame [layout]="layout()" kind="area" [label]="label() ?? 'Area chart'">
-      @for (a of layout().areas; track a.series) {
-        <svg:path
-          data-skdx-part="area"
-          [attr.d]="a.d"
-          [attr.fill]="a.color"
-          fill-opacity="0.25"
-        ></svg:path>
-      }
-      <svg:g skdxChartLines [lines]="layout().lines" [points]="layout().points"></svg:g>
-    </skdx-chart-frame>
-  `, isInline: true, dependencies: [{ kind: "component", type: SkdxChartFrameComponent, selector: "skdx-chart-frame", inputs: ["layout", "kind", "label"] }, { kind: "component", type: SkdxChartLinesComponent, selector: "g[skdxChartLines]", inputs: ["lines", "points"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: SkdxAreaChartComponent, isStandalone: true, selector: "skdx-area-chart", usesInheritance: true, ngImport: i0, template: `
+    <skdx-chart-root
+      [layout]="layout()"
+      kind="area"
+      [label]="label() ?? 'Area chart'"
+      [zoomable]="zoomable()"
+      [responsive]="responsive()"
+      (itemClick)="itemClick.emit($event)"
+      (hiddenSeriesChange)="toggle($event)"
+      (zoomChange)="zoom.set($event)"
+      (measured)="measuredWidth.set($event)"
+    ></skdx-chart-root>
+  `, isInline: true, dependencies: [{ kind: "component", type: SkdxChartRootComponent, selector: "skdx-chart-root", inputs: ["layout", "kind", "label", "zoomable", "responsive"], outputs: ["itemClick", "hiddenSeriesChange", "zoomChange", "measured"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxAreaChartComponent, decorators: [{
             type: Component,
@@ -35,29 +35,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     selector: 'skdx-area-chart',
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [SkdxChartFrameComponent, SkdxChartLinesComponent],
+                    imports: [SkdxChartRootComponent],
                     template: `
-    <skdx-chart-frame [layout]="layout()" kind="area" [label]="label() ?? 'Area chart'">
-      @for (a of layout().areas; track a.series) {
-        <svg:path
-          data-skdx-part="area"
-          [attr.d]="a.d"
-          [attr.fill]="a.color"
-          fill-opacity="0.25"
-        ></svg:path>
-      }
-      <svg:g skdxChartLines [lines]="layout().lines" [points]="layout().points"></svg:g>
-    </skdx-chart-frame>
+    <skdx-chart-root
+      [layout]="layout()"
+      kind="area"
+      [label]="label() ?? 'Area chart'"
+      [zoomable]="zoomable()"
+      [responsive]="responsive()"
+      (itemClick)="itemClick.emit($event)"
+      (hiddenSeriesChange)="toggle($event)"
+      (zoomChange)="zoom.set($event)"
+      (measured)="measuredWidth.set($event)"
+    ></skdx-chart-root>
   `,
                 }]
         }] });
 
-/*
- * Copyright (c) 2026 SkandaDX
- * This file is part of the SkandaDX organization.
- * Licensed under the MIT License. See LICENSE in the repository root.
- */
-
 /**
  * Generated bundle index. Do not edit.
  */

package/fesm2022/skdx-angular-charts-area.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"skdx-angular-charts-area.mjs","sources":["../../src/area/area-chart.component.ts","../../src/area/index.ts","../../src/area/skdx-angular-charts-area.ts"],"sourcesContent":["/*\n * Copyright (c) 2026 SkandaDX\n * This file is part of the SkandaDX organization.\n * Licensed under the MIT License. See LICENSE in the repository root.\n */\n\nimport { ChangeDetectionStrategy, Component, computed } from '@angular/core';\n\nimport {\n  layoutAreaChart,\n  SkdxChartBase,\n  SkdxChartFrameComponent,\n  SkdxChartLinesComponent,\n} from '@skdx/angular-charts/internal';\n\n/** A line chart with each series filled down to the zero baseline. */\n@Component({\n  selector: 'skdx-area-chart',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [SkdxChartFrameComponent, SkdxChartLinesComponent],\n  template: `\n    <skdx-chart-frame [layout]=\"layout()\" kind=\"area\" [label]=\"label() ?? 'Area chart'\">\n      @for (a of layout().areas; track a.series) {\n        <svg:path\n          data-skdx-part=\"area\"\n          [attr.d]=\"a.d\"\n          [attr.fill]=\"a.color\"\n          fill-opacity=\"0.25\"\n        ></svg:path>\n      }\n      <svg:g skdxChartLines [lines]=\"layout().lines\" [points]=\"layout().points\"></svg:g>\n    </skdx-chart-frame>\n  `,\n})\nexport class SkdxAreaChartComponent extends SkdxChartBase {\n  protected readonly layout = computed(() => layoutAreaChart(this.input()));\n}\n","/*\n * Copyright (c) 2026 SkandaDX\n * This file is part of the SkandaDX organization.\n * Licensed under the MIT License. See LICENSE in the repository root.\n */\n\nexport { SkdxAreaChartComponent } from './area-chart.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;;;;AAIG;AAWH;AAoBM,MAAO,sBAAuB,SAAQ,aAAa,CAAA;AAnBzD,IAAA,WAAA,GAAA;;AAoBqB,QAAA,IAAA,CAAA,MAAM,GAAG,QAAQ,CAAC,MAAM,eAAe,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;mFAAC;AAC1E,IAAA;8GAFY,sBAAsB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAdvB;;;;;;;;;;;;GAYT,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAbS,uBAAuB,kGAAE,uBAAuB,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAe/C,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAnBlC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,UAAU,EAAE,IAAI;oBAChB,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,OAAO,EAAE,CAAC,uBAAuB,EAAE,uBAAuB,CAAC;AAC3D,oBAAA,QAAQ,EAAE;;;;;;;;;;;;AAYT,EAAA,CAAA;AACF,iBAAA;;;AClCD;;;;AAIG;;ACJH;;AAEG;;"}
+{"version":3,"file":"skdx-angular-charts-area.mjs","sources":["../../src/area/index.ts","../../src/area/skdx-angular-charts-area.ts"],"sourcesContent":["/*\n * Copyright (c) 2026 SkandaDX\n * This file is part of the SkandaDX organization.\n * Licensed under the MIT License. See LICENSE in the repository root.\n */\n\nimport { ChangeDetectionStrategy, Component, computed } from '@angular/core';\n\nimport {\n  layoutAreaChart,\n  SkdxChartBase,\n  SkdxChartRootComponent,\n} from '@skdx/angular-charts/internal';\n\n/** Filled, optionally stacked, areas down to zero; series may also be bars, lines or ranges. */\n@Component({\n  selector: 'skdx-area-chart',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [SkdxChartRootComponent],\n  template: `\n    <skdx-chart-root\n      [layout]=\"layout()\"\n      kind=\"area\"\n      [label]=\"label() ?? 'Area chart'\"\n      [zoomable]=\"zoomable()\"\n      [responsive]=\"responsive()\"\n      (itemClick)=\"itemClick.emit($event)\"\n      (hiddenSeriesChange)=\"toggle($event)\"\n      (zoomChange)=\"zoom.set($event)\"\n      (measured)=\"measuredWidth.set($event)\"\n    ></skdx-chart-root>\n  `,\n})\nexport class SkdxAreaChartComponent extends SkdxChartBase {\n  protected readonly layout = computed(() => layoutAreaChart(this.input()));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;;;;AAIG;AAUH;AAoBM,MAAO,sBAAuB,SAAQ,aAAa,CAAA;AAnBzD,IAAA,WAAA,GAAA;;AAoBqB,QAAA,IAAA,CAAA,MAAM,GAAG,QAAQ,CAAC,MAAM,eAAe,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;mFAAC;AAC1E,IAAA;8GAFY,sBAAsB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAdvB;;;;;;;;;;;;AAYT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAbS,sBAAsB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,YAAA,CAAA,EAAA,OAAA,EAAA,CAAA,WAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAerB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAnBlC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,UAAU,EAAE,IAAI;oBAChB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,OAAO,EAAE,CAAC,sBAAsB,CAAC;AACjC,oBAAA,QAAQ,EAAE;;;;;;;;;;;;AAYT,EAAA,CAAA;AACF,iBAAA;;;ACjCD;;AAEG;;"}

package/fesm2022/skdx-angular-charts-bar.mjs

@@ -1,45 +1,33 @@
 import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
-import { SkdxChartBase, layoutBarChart, SkdxChartFrameComponent } from '@skdx/angular-charts/internal';
+import { computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { SkdxChartBase, layoutBarChart, SkdxChartRootComponent } from '@skdx/angular-charts/internal';
 
 /*
  * Copyright (c) 2026 SkandaDX
  * This file is part of the SkandaDX organization.
  * Licensed under the MIT License. See LICENSE in the repository root.
  */
-/**
- * Grouped or stacked vertical bars, one per value.
- *
- * ```html
- * <skdx-bar-chart [series]="[{ name: 'Sales', data: [3, 5, 2] }]" [categories]="['Q1', 'Q2', 'Q3']"></skdx-bar-chart>
- * ```
- */
+/** Grouped, stacked, horizontal or histogram bars; series may also be lines, areas or ranges. */
 class SkdxBarChartComponent extends SkdxChartBase {
     constructor() {
         super(...arguments);
-        /** Stack series on top of each other instead of grouping them side by side. */
-        this.stacked = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "stacked" }] : /* istanbul ignore next */ []));
-        this.layout = computed(() => layoutBarChart({ ...this.input(), stacked: this.stacked() }), /* @ts-ignore */
+        this.layout = computed(() => layoutBarChart(this.input()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxBarChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: SkdxBarChartComponent, isStandalone: true, selector: "skdx-bar-chart", inputs: { stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    <skdx-chart-frame [layout]="layout()" kind="bar" [label]="label() ?? 'Bar chart'">
-      @for (b of layout().bars; track $index) {
-        <svg:rect
-          data-skdx-part="bar"
-          [attr.x]="b.x"
-          [attr.y]="b.y"
-          [attr.width]="b.width"
-          [attr.height]="b.height"
-          [attr.fill]="b.color"
-        >
-          <svg:title>{{ b.title }}</svg:title>
-        </svg:rect>
-      }
-    </skdx-chart-frame>
-  `, isInline: true, dependencies: [{ kind: "component", type: SkdxChartFrameComponent, selector: "skdx-chart-frame", inputs: ["layout", "kind", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: SkdxBarChartComponent, isStandalone: true, selector: "skdx-bar-chart", usesInheritance: true, ngImport: i0, template: `
+    <skdx-chart-root
+      [layout]="layout()"
+      kind="bar"
+      [label]="label() ?? 'Bar chart'"
+      [zoomable]="zoomable()"
+      [responsive]="responsive()"
+      (itemClick)="itemClick.emit($event)"
+      (hiddenSeriesChange)="toggle($event)"
+      (zoomChange)="zoom.set($event)"
+      (measured)="measuredWidth.set($event)"
+    ></skdx-chart-root>
+  `, isInline: true, dependencies: [{ kind: "component", type: SkdxChartRootComponent, selector: "skdx-chart-root", inputs: ["layout", "kind", "label", "zoomable", "responsive"], outputs: ["itemClick", "hiddenSeriesChange", "zoomChange", "measured"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxBarChartComponent, decorators: [{
             type: Component,
@@ -47,31 +35,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     selector: 'skdx-bar-chart',
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [SkdxChartFrameComponent],
+                    imports: [SkdxChartRootComponent],
                     template: `
-    <skdx-chart-frame [layout]="layout()" kind="bar" [label]="label() ?? 'Bar chart'">
-      @for (b of layout().bars; track $index) {
-        <svg:rect
-          data-skdx-part="bar"
-          [attr.x]="b.x"
-          [attr.y]="b.y"
-          [attr.width]="b.width"
-          [attr.height]="b.height"
-          [attr.fill]="b.color"
-        >
-          <svg:title>{{ b.title }}</svg:title>
-        </svg:rect>
-      }
-    </skdx-chart-frame>
+    <skdx-chart-root
+      [layout]="layout()"
+      kind="bar"
+      [label]="label() ?? 'Bar chart'"
+      [zoomable]="zoomable()"
+      [responsive]="responsive()"
+      (itemClick)="itemClick.emit($event)"
+      (hiddenSeriesChange)="toggle($event)"
+      (zoomChange)="zoom.set($event)"
+      (measured)="measuredWidth.set($event)"
+    ></skdx-chart-root>
   `,
                 }]
-        }], propDecorators: { stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }] } });
-
-/*
- * Copyright (c) 2026 SkandaDX
- * This file is part of the SkandaDX organization.
- * Licensed under the MIT License. See LICENSE in the repository root.
- */
+        }] });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/skdx-angular-charts-bar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"skdx-angular-charts-bar.mjs","sources":["../../src/bar/bar-chart.component.ts","../../src/bar/index.ts","../../src/bar/skdx-angular-charts-bar.ts"],"sourcesContent":["/*\n * Copyright (c) 2026 SkandaDX\n * This file is part of the SkandaDX organization.\n * Licensed under the MIT License. See LICENSE in the repository root.\n */\n\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\n\nimport {\n  layoutBarChart,\n  SkdxChartBase,\n  SkdxChartFrameComponent,\n} from '@skdx/angular-charts/internal';\n\n/**\n * Grouped or stacked vertical bars, one per value.\n *\n * ```html\n * <skdx-bar-chart [series]=\"[{ name: 'Sales', data: [3, 5, 2] }]\" [categories]=\"['Q1', 'Q2', 'Q3']\"></skdx-bar-chart>\n * ```\n */\n@Component({\n  selector: 'skdx-bar-chart',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [SkdxChartFrameComponent],\n  template: `\n    <skdx-chart-frame [layout]=\"layout()\" kind=\"bar\" [label]=\"label() ?? 'Bar chart'\">\n      @for (b of layout().bars; track $index) {\n        <svg:rect\n          data-skdx-part=\"bar\"\n          [attr.x]=\"b.x\"\n          [attr.y]=\"b.y\"\n          [attr.width]=\"b.width\"\n          [attr.height]=\"b.height\"\n          [attr.fill]=\"b.color\"\n        >\n          <svg:title>{{ b.title }}</svg:title>\n        </svg:rect>\n      }\n    </skdx-chart-frame>\n  `,\n})\nexport class SkdxBarChartComponent extends SkdxChartBase {\n  /** Stack series on top of each other instead of grouping them side by side. */\n  readonly stacked = input(false);\n\n  protected readonly layout = computed(() =>\n    layoutBarChart({ ...this.input(), stacked: this.stacked() }),\n  );\n}\n","/*\n * Copyright (c) 2026 SkandaDX\n * This file is part of the SkandaDX organization.\n * Licensed under the MIT License. See LICENSE in the repository root.\n */\n\nexport { SkdxBarChartComponent } from './bar-chart.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;;;;AAIG;AAUH;;;;;;AAMG;AAuBG,MAAO,qBAAsB,SAAQ,aAAa,CAAA;AAtBxD,IAAA,WAAA,GAAA;;;QAwBW,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,KAAK;oFAAC;QAEZ,IAAA,CAAA,MAAM,GAAG,QAAQ,CAAC,MACnC,cAAc,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;mFAC7D;AACF,IAAA;8GAPY,qBAAqB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAjBtB;;;;;;;;;;;;;;;AAeT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAhBS,uBAAuB,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAkBtB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAtBjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,UAAU,EAAE,IAAI;oBAChB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,OAAO,EAAE,CAAC,uBAAuB,CAAC;AAClC,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;AAeT,EAAA,CAAA;AACF,iBAAA;;;AC1CD;;;;AAIG;;ACJH;;AAEG;;"}
+{"version":3,"file":"skdx-angular-charts-bar.mjs","sources":["../../src/bar/index.ts","../../src/bar/skdx-angular-charts-bar.ts"],"sourcesContent":["/*\n * Copyright (c) 2026 SkandaDX\n * This file is part of the SkandaDX organization.\n * Licensed under the MIT License. See LICENSE in the repository root.\n */\n\nimport { ChangeDetectionStrategy, Component, computed } from '@angular/core';\n\nimport {\n  layoutBarChart,\n  SkdxChartBase,\n  SkdxChartRootComponent,\n} from '@skdx/angular-charts/internal';\n\n/** Grouped, stacked, horizontal or histogram bars; series may also be lines, areas or ranges. */\n@Component({\n  selector: 'skdx-bar-chart',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [SkdxChartRootComponent],\n  template: `\n    <skdx-chart-root\n      [layout]=\"layout()\"\n      kind=\"bar\"\n      [label]=\"label() ?? 'Bar chart'\"\n      [zoomable]=\"zoomable()\"\n      [responsive]=\"responsive()\"\n      (itemClick)=\"itemClick.emit($event)\"\n      (hiddenSeriesChange)=\"toggle($event)\"\n      (zoomChange)=\"zoom.set($event)\"\n      (measured)=\"measuredWidth.set($event)\"\n    ></skdx-chart-root>\n  `,\n})\nexport class SkdxBarChartComponent extends SkdxChartBase {\n  protected readonly layout = computed(() => layoutBarChart(this.input()));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;;;;AAIG;AAUH;AAoBM,MAAO,qBAAsB,SAAQ,aAAa,CAAA;AAnBxD,IAAA,WAAA,GAAA;;AAoBqB,QAAA,IAAA,CAAA,MAAM,GAAG,QAAQ,CAAC,MAAM,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;mFAAC;AACzE,IAAA;8GAFY,qBAAqB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAdtB;;;;;;;;;;;;AAYT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAbS,sBAAsB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,YAAA,CAAA,EAAA,OAAA,EAAA,CAAA,WAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAerB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAnBjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,UAAU,EAAE,IAAI;oBAChB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,OAAO,EAAE,CAAC,sBAAsB,CAAC;AACjC,oBAAA,QAAQ,EAAE;;;;;;;;;;;;AAYT,EAAA,CAAA;AACF,iBAAA;;;ACjCD;;AAEG;;"}

package/fesm2022/skdx-angular-charts-boxplot.mjs

@@ -7,20 +7,29 @@ import { SkdxSizedBase, layoutBoxplot, SkdxChartRootComponent } from '@skdx/angu
  * This file is part of the SkandaDX organization.
  * Licensed under the MIT License. See LICENSE in the repository root.
  */
-/** Quartile boxes with Tukey whiskers and outliers, one per series. */
+/** One Tukey box per series over its raw samples. */
 class SkdxBoxplotComponent extends SkdxSizedBase {
     constructor() {
         super(...arguments);
         this.series = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
-        this.l = computed(() => layoutBoxplot({ ...this.sized(), series: this.series() }), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "l" }] : /* istanbul ignore next */ []));
+        this.layout = computed(() => layoutBoxplot({ ...this.sized(), series: this.series() }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxBoxplotComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SkdxBoxplotComponent, isStandalone: true, selector: "skdx-boxplot", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    <skdx-chart-root [layout]="l()" kind="boxplot" [label]="label() ?? 'Box plot'">
-    </skdx-chart-root>
-  `, isInline: true, dependencies: [{ kind: "component", type: SkdxChartRootComponent, selector: "skdx-chart-root", inputs: ["layout", "kind", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    <skdx-chart-root
+      [layout]="layout()"
+      kind="boxplot"
+      [label]="label() ?? 'Box plot'"
+      [zoomable]="zoomable()"
+      [responsive]="responsive()"
+      (itemClick)="itemClick.emit($event)"
+      (hiddenSeriesChange)="toggle($event)"
+      (zoomChange)="zoom.set($event)"
+      (measured)="measuredWidth.set($event)"
+    ></skdx-chart-root>
+  `, isInline: true, dependencies: [{ kind: "component", type: SkdxChartRootComponent, selector: "skdx-chart-root", inputs: ["layout", "kind", "label", "zoomable", "responsive"], outputs: ["itemClick", "hiddenSeriesChange", "zoomChange", "measured"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxBoxplotComponent, decorators: [{
             type: Component,
@@ -30,18 +39,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [SkdxChartRootComponent],
                     template: `
-    <skdx-chart-root [layout]="l()" kind="boxplot" [label]="label() ?? 'Box plot'">
-    </skdx-chart-root>
+    <skdx-chart-root
+      [layout]="layout()"
+      kind="boxplot"
+      [label]="label() ?? 'Box plot'"
+      [zoomable]="zoomable()"
+      [responsive]="responsive()"
+      (itemClick)="itemClick.emit($event)"
+      (hiddenSeriesChange)="toggle($event)"
+      (zoomChange)="zoom.set($event)"
+      (measured)="measuredWidth.set($event)"
+    ></skdx-chart-root>
   `,
                 }]
         }], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }] } });
 
-/*
- * Copyright (c) 2026 SkandaDX
- * This file is part of the SkandaDX organization.
- * Licensed under the MIT License. See LICENSE in the repository root.
- */
-
 /**
  * Generated bundle index. Do not edit.
  */

package/fesm2022/skdx-angular-charts-boxplot.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"skdx-angular-charts-boxplot.mjs","sources":["../../src/boxplot/boxplot.component.ts","../../src/boxplot/index.ts","../../src/boxplot/skdx-angular-charts-boxplot.ts"],"sourcesContent":["/*\n * Copyright (c) 2026 SkandaDX\n * This file is part of the SkandaDX organization.\n * Licensed under the MIT License. See LICENSE in the repository root.\n */\n\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\n\nimport {\n  layoutBoxplot,\n  type Series,\n  SkdxChartRootComponent,\n  SkdxSizedBase,\n} from '@skdx/angular-charts/internal';\n\n/** Quartile boxes with Tukey whiskers and outliers, one per series. */\n@Component({\n  selector: 'skdx-boxplot',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [SkdxChartRootComponent],\n  template: `\n    <skdx-chart-root [layout]=\"l()\" kind=\"boxplot\" [label]=\"label() ?? 'Box plot'\">\n    </skdx-chart-root>\n  `,\n})\nexport class SkdxBoxplotComponent extends SkdxSizedBase {\n  readonly series = input.required<Series[]>();\n\n  protected readonly l = computed(() => layoutBoxplot({ ...this.sized(), series: this.series() }));\n}\n","/*\n * Copyright (c) 2026 SkandaDX\n * This file is part of the SkandaDX organization.\n * Licensed under the MIT License. See LICENSE in the repository root.\n */\n\nexport { SkdxBoxplotComponent } from './boxplot.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;;;;AAIG;AAWH;AAWM,MAAO,oBAAqB,SAAQ,aAAa,CAAA;AAVvD,IAAA,WAAA,GAAA;;QAWW,IAAA,CAAA,MAAM,GAAG,KAAK,CAAC,QAAQ;mFAAY;QAEzB,IAAA,CAAA,CAAC,GAAG,QAAQ,CAAC,MAAM,aAAa,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;8EAAC;AACjG,IAAA;8GAJY,oBAAoB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EALrB;;;AAGT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAJS,sBAAsB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAMrB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAVhC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,cAAc;AACxB,oBAAA,UAAU,EAAE,IAAI;oBAChB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,OAAO,EAAE,CAAC,sBAAsB,CAAC;AACjC,oBAAA,QAAQ,EAAE;;;AAGT,EAAA,CAAA;AACF,iBAAA;;;ACzBD;;;;AAIG;;ACJH;;AAEG;;"}
+{"version":3,"file":"skdx-angular-charts-boxplot.mjs","sources":["../../src/boxplot/index.ts","../../src/boxplot/skdx-angular-charts-boxplot.ts"],"sourcesContent":["/*\n * Copyright (c) 2026 SkandaDX\n * This file is part of the SkandaDX organization.\n * Licensed under the MIT License. See LICENSE in the repository root.\n */\n\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\n\nimport {\n  layoutBoxplot,\n  SkdxChartRootComponent,\n  SkdxSizedBase,\n  type Series,\n} from '@skdx/angular-charts/internal';\n\n/** One Tukey box per series over its raw samples. */\n@Component({\n  selector: 'skdx-boxplot',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [SkdxChartRootComponent],\n  template: `\n    <skdx-chart-root\n      [layout]=\"layout()\"\n      kind=\"boxplot\"\n      [label]=\"label() ?? 'Box plot'\"\n      [zoomable]=\"zoomable()\"\n      [responsive]=\"responsive()\"\n      (itemClick)=\"itemClick.emit($event)\"\n      (hiddenSeriesChange)=\"toggle($event)\"\n      (zoomChange)=\"zoom.set($event)\"\n      (measured)=\"measuredWidth.set($event)\"\n    ></skdx-chart-root>\n  `,\n})\nexport class SkdxBoxplotComponent extends SkdxSizedBase {\n  readonly series = input.required<Series[]>();\n\n  protected readonly layout = computed(() =>\n    layoutBoxplot({ ...this.sized(), series: this.series() }),\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;;;;AAIG;AAWH;AAoBM,MAAO,oBAAqB,SAAQ,aAAa,CAAA;AAnBvD,IAAA,WAAA,GAAA;;QAoBW,IAAA,CAAA,MAAM,GAAG,KAAK,CAAC,QAAQ;mFAAY;QAEzB,IAAA,CAAA,MAAM,GAAG,QAAQ,CAAC,MACnC,aAAa,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;mFAC1D;AACF,IAAA;8GANY,oBAAoB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAdrB;;;;;;;;;;;;AAYT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAbS,sBAAsB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,YAAA,CAAA,EAAA,OAAA,EAAA,CAAA,WAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAerB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAnBhC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,cAAc;AACxB,oBAAA,UAAU,EAAE,IAAI;oBAChB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,OAAO,EAAE,CAAC,sBAAsB,CAAC;AACjC,oBAAA,QAAQ,EAAE;;;;;;;;;;;;AAYT,EAAA,CAAA;AACF,iBAAA;;;AClCD;;AAEG;;"}

package/fesm2022/skdx-angular-charts-candlestick.mjs

@@ -7,20 +7,50 @@ import { SkdxSizedBase, layoutCandlestick, SkdxChartRootComponent } from '@skdx/
  * This file is part of the SkandaDX organization.
  * Licensed under the MIT License. See LICENSE in the repository root.
  */
-/** Open/high/low/close candles, green when closing higher. */
+/** Candles or OHLC bars on a time axis, with an optional volume pane, references, zoom and brush. */
 class SkdxCandlestickChartComponent extends SkdxSizedBase {
     constructor() {
         super(...arguments);
         this.data = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-        this.l = computed(() => layoutCandlestick({ ...this.sized(), data: this.data() }), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "l" }] : /* istanbul ignore next */ []));
+        this.scale = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "scale" }] : /* istanbul ignore next */ []));
+        this.variant = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.xAxis = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "xAxis" }] : /* istanbul ignore next */ []));
+        this.references = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "references" }] : /* istanbul ignore next */ []));
+        this.brush = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "brush" }] : /* istanbul ignore next */ []));
+        this.crosshair = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "crosshair" }] : /* istanbul ignore next */ []));
+        this.layout = computed(() => layoutCandlestick({
+            ...this.sized(),
+            data: this.data(),
+            scale: this.scale(),
+            variant: this.variant(),
+            xAxis: this.xAxis(),
+            references: this.references(),
+            brush: this.brush(),
+            crosshair: this.crosshair(),
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxCandlestickChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SkdxCandlestickChartComponent, isStandalone: true, selector: "skdx-candlestick-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    <skdx-chart-root [layout]="l()" kind="candlestick" [label]="label() ?? 'Candlestick chart'">
-    </skdx-chart-root>
-  `, isInline: true, dependencies: [{ kind: "component", type: SkdxChartRootComponent, selector: "skdx-chart-root", inputs: ["layout", "kind", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SkdxCandlestickChartComponent, isStandalone: true, selector: "skdx-candlestick-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, scale: { classPropertyName: "scale", publicName: "scale", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, xAxis: { classPropertyName: "xAxis", publicName: "xAxis", isSignal: true, isRequired: false, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: true, isRequired: false, transformFunction: null }, brush: { classPropertyName: "brush", publicName: "brush", isSignal: true, isRequired: false, transformFunction: null }, crosshair: { classPropertyName: "crosshair", publicName: "crosshair", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <skdx-chart-root
+      [layout]="layout()"
+      kind="candlestick"
+      [label]="label() ?? 'Candlestick chart'"
+      [zoomable]="zoomable()"
+      [responsive]="responsive()"
+      (itemClick)="itemClick.emit($event)"
+      (hiddenSeriesChange)="toggle($event)"
+      (zoomChange)="zoom.set($event)"
+      (measured)="measuredWidth.set($event)"
+    ></skdx-chart-root>
+  `, isInline: true, dependencies: [{ kind: "component", type: SkdxChartRootComponent, selector: "skdx-chart-root", inputs: ["layout", "kind", "label", "zoomable", "responsive"], outputs: ["itemClick", "hiddenSeriesChange", "zoomChange", "measured"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxCandlestickChartComponent, decorators: [{
             type: Component,
@@ -30,17 +60,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [SkdxChartRootComponent],
                     template: `
-    <skdx-chart-root [layout]="l()" kind="candlestick" [label]="label() ?? 'Candlestick chart'">
-    </skdx-chart-root>
+    <skdx-chart-root
+      [layout]="layout()"
+      kind="candlestick"
+      [label]="label() ?? 'Candlestick chart'"
+      [zoomable]="zoomable()"
+      [responsive]="responsive()"
+      (itemClick)="itemClick.emit($event)"
+      (hiddenSeriesChange)="toggle($event)"
+      (zoomChange)="zoom.set($event)"
+      (measured)="measuredWidth.set($event)"
+    ></skdx-chart-root>
   `,
                 }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
-
-/*
- * Copyright (c) 2026 SkandaDX
- * This file is part of the SkandaDX organization.
- * Licensed under the MIT License. See LICENSE in the repository root.
- */
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], scale: [{ type: i0.Input, args: [{ isSignal: true, alias: "scale", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], xAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxis", required: false }] }], references: [{ type: i0.Input, args: [{ isSignal: true, alias: "references", required: false }] }], brush: [{ type: i0.Input, args: [{ isSignal: true, alias: "brush", required: false }] }], crosshair: [{ type: i0.Input, args: [{ isSignal: true, alias: "crosshair", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/skdx-angular-charts-candlestick.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"skdx-angular-charts-candlestick.mjs","sources":["../../src/candlestick/candlestick-chart.component.ts","../../src/candlestick/index.ts","../../src/candlestick/skdx-angular-charts-candlestick.ts"],"sourcesContent":["/*\n * Copyright (c) 2026 SkandaDX\n * This file is part of the SkandaDX organization.\n * Licensed under the MIT License. See LICENSE in the repository root.\n */\n\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\n\nimport {\n  layoutCandlestick,\n  type Candle,\n  SkdxChartRootComponent,\n  SkdxSizedBase,\n} from '@skdx/angular-charts/internal';\n\n/** Open/high/low/close candles, green when closing higher. */\n@Component({\n  selector: 'skdx-candlestick-chart',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [SkdxChartRootComponent],\n  template: `\n    <skdx-chart-root [layout]=\"l()\" kind=\"candlestick\" [label]=\"label() ?? 'Candlestick chart'\">\n    </skdx-chart-root>\n  `,\n})\nexport class SkdxCandlestickChartComponent extends SkdxSizedBase {\n  readonly data = input.required<Candle[]>();\n\n  protected readonly l = computed(() => layoutCandlestick({ ...this.sized(), data: this.data() }));\n}\n","/*\n * Copyright (c) 2026 SkandaDX\n * This file is part of the SkandaDX organization.\n * Licensed under the MIT License. See LICENSE in the repository root.\n */\n\nexport { SkdxCandlestickChartComponent } from './candlestick-chart.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;;;;AAIG;AAWH;AAWM,MAAO,6BAA8B,SAAQ,aAAa,CAAA;AAVhE,IAAA,WAAA,GAAA;;QAWW,IAAA,CAAA,IAAI,GAAG,KAAK,CAAC,QAAQ;iFAAY;QAEvB,IAAA,CAAA,CAAC,GAAG,QAAQ,CAAC,MAAM,iBAAiB,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;8EAAC;AACjG,IAAA;8GAJY,6BAA6B,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA7B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,6BAA6B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAL9B;;;AAGT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAJS,sBAAsB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAMrB,6BAA6B,EAAA,UAAA,EAAA,CAAA;kBAVzC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,wBAAwB;AAClC,oBAAA,UAAU,EAAE,IAAI;oBAChB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,OAAO,EAAE,CAAC,sBAAsB,CAAC;AACjC,oBAAA,QAAQ,EAAE;;;AAGT,EAAA,CAAA;AACF,iBAAA;;;ACzBD;;;;AAIG;;ACJH;;AAEG;;"}
+{"version":3,"file":"skdx-angular-charts-candlestick.mjs","sources":["../../src/candlestick/index.ts","../../src/candlestick/skdx-angular-charts-candlestick.ts"],"sourcesContent":["/*\n * Copyright (c) 2026 SkandaDX\n * This file is part of the SkandaDX organization.\n * Licensed under the MIT License. See LICENSE in the repository root.\n */\n\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\n\nimport {\n  layoutCandlestick,\n  SkdxChartRootComponent,\n  SkdxSizedBase,\n  type AxisOptions,\n  type Candle,\n  type Reference,\n} from '@skdx/angular-charts/internal';\n\n/** Candles or OHLC bars on a time axis, with an optional volume pane, references, zoom and brush. */\n@Component({\n  selector: 'skdx-candlestick-chart',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [SkdxChartRootComponent],\n  template: `\n    <skdx-chart-root\n      [layout]=\"layout()\"\n      kind=\"candlestick\"\n      [label]=\"label() ?? 'Candlestick chart'\"\n      [zoomable]=\"zoomable()\"\n      [responsive]=\"responsive()\"\n      (itemClick)=\"itemClick.emit($event)\"\n      (hiddenSeriesChange)=\"toggle($event)\"\n      (zoomChange)=\"zoom.set($event)\"\n      (measured)=\"measuredWidth.set($event)\"\n    ></skdx-chart-root>\n  `,\n})\nexport class SkdxCandlestickChartComponent extends SkdxSizedBase {\n  readonly data = input.required<Candle[]>();\n  readonly scale = input<'linear' | 'log'>();\n  readonly variant = input<'candlestick' | 'ohlc'>();\n  readonly xAxis = input<Pick<AxisOptions, 'format'>>();\n  readonly references = input<Reference[]>();\n  readonly brush = input(false);\n  readonly crosshair = input(false);\n\n  protected readonly layout = computed(() =>\n    layoutCandlestick({\n      ...this.sized(),\n      data: this.data(),\n      scale: this.scale(),\n      variant: this.variant(),\n      xAxis: this.xAxis(),\n      references: this.references(),\n      brush: this.brush(),\n      crosshair: this.crosshair(),\n    }),\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}