@skyux/charts 14.6.2 → 14.8.0

package/fesm2022/skyux-charts.mjs

@@ -1,14 +1,1135 @@
 import * as i0 from '@angular/core';
-import { NgModule, inject, ChangeDetectionStrategy, Component, DestroyRef, input, computed, numberAttribute, booleanAttribute } from '@angular/core';
+import { input, booleanAttribute, ChangeDetectionStrategy, Component, numberAttribute, inject, computed, viewChild, ElementRef, DestroyRef, afterRenderEffect, signal, Injectable, Directive, contentChild, contentChildren, NgModule } from '@angular/core';
+import { toSignal, toObservable } from '@angular/core/rxjs-interop';
+import * as i2 from '@skyux/i18n';
+import { SkyIntlNumberFormatStyle, SkyIntlNumberFormatter, SkyAppLocaleProvider, SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
+import { map } from 'rxjs/operators';
+import { SkyLogService } from '@skyux/core';
+import { SkyThemeService } from '@skyux/theme';
+import { map as map$1, EMPTY, switchMap, of } from 'rxjs';
+import { Chart, BarController, BarElement, CategoryScale, LinearScale, LogarithmicScale, Legend, Tooltip } from 'chart.js';
+import * as i1$3 from '@skyux/indicators';
+import { SkyWaitModule } from '@skyux/indicators';
 import * as i1 from '@skyux/modals';
 import { SkyModalInstance, SkyModalModule, SkyModalService } from '@skyux/modals';
 import * as i1$1 from '@skyux/popovers';
 import { SkyDropdownModule } from '@skyux/popovers';
-import * as i2 from '@skyux/i18n';
-import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
 import * as i1$2 from '@skyux/help-inline';
 import { SkyHelpInlineModule } from '@skyux/help-inline';
 
+/**
+ * Defines the category axis of a chart. Its categories are shared by every
+ * series plotted against it, and each series' values align to them by index.
+ *
+ * @preview
+ */
+class SkyChartAxisCategory {
+    constructor() {
+        /**
+         * The categories shared by every series plotted against this axis. Each
+         * series' values are aligned to these categories by index.
+         */
+        this.categories = input.required(...(ngDevMode ? [{ debugName: "categories" }] : []));
+        /**
+         * Whether to hide the axis label.
+         */
+        this.labelHidden = input(false, { ...(ngDevMode ? { debugName: "labelHidden" } : {}), transform: booleanAttribute });
+        /**
+         * The text of the axis label.
+         */
+        this.labelText = input.required(...(ngDevMode ? [{ debugName: "labelText" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChartAxisCategory, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: SkyChartAxisCategory, isStandalone: true, selector: "sky-chart-axis-category", inputs: { categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: true, transformFunction: null }, labelHidden: { classPropertyName: "labelHidden", publicName: "labelHidden", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChartAxisCategory, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'sky-chart-axis-category',
+                    template: '',
+                }]
+        }], propDecorators: { categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: true }] }], labelHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelHidden", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: true }] }] } });
+
+/**
+ * Creates a function that formats a numeric value according to the given
+ * `format`, `currencyCode`, `digits`, and `locale`. Shared by every chart type
+ * so value formatting is not tied to an axis.
+ * @internal
+ */
+function createSkyChartValueFormatter(options) {
+    const { format, currencyCode = 'USD', digits, locale } = options;
+    let style;
+    switch (format) {
+        case 'currency':
+            style = SkyIntlNumberFormatStyle.Currency;
+            break;
+        case 'percent':
+            style = SkyIntlNumberFormatStyle.Percent;
+            break;
+        default:
+            style = SkyIntlNumberFormatStyle.Decimal;
+            break;
+    }
+    return (value) => SkyIntlNumberFormatter.format(value, locale, style, {
+        currency: format === 'currency' ? currencyCode : undefined,
+        currencyDisplay: 'symbol',
+        minimumFractionDigits: digits,
+        maximumFractionDigits: digits,
+    });
+}
+
+/**
+ * Coerces an attribute to a number, treating unset and invalid values as
+ * `undefined`.
+ */
+function optionalNumberAttribute(value) {
+    if (value === undefined || value === null) {
+        return undefined;
+    }
+    const num = numberAttribute(value);
+    return Number.isNaN(num) ? undefined : num;
+}
+
+/**
+ * Defines the value axis of a chart, which scales the plotted series and
+ * formats their values in axis labels, tooltips, and the data table.
+ *
+ * @preview
+ */
+class SkyChartAxisValue {
+    constructor() {
+        this.#localeProvider = inject(SkyAppLocaleProvider);
+        this.#locale = toSignal(this.#localeProvider.getLocaleInfo().pipe(map((info) => info.locale)), { initialValue: this.#localeProvider.defaultLocale });
+        /**
+         * The ISO 4217 currency code used when `format` is `currency`. When unset,
+         * currency values format as `USD`.
+         */
+        this.currencyCode = input(...(ngDevMode ? [undefined, { debugName: "currencyCode" }] : []));
+        /**
+         * The number of decimal places to display. When unset, the format's
+         * locale-aware default is used (for example, two places for most
+         * currencies).
+         */
+        this.digits = input(undefined, { ...(ngDevMode ? { debugName: "digits" } : {}), transform: optionalNumberAttribute });
+        /**
+         * How to format the axis values in axis labels, tooltips, and the data table.
+         * The `percent` format expects fractional values, so `0.25` displays as
+         * `25%`.
+         * @default 'number'
+         */
+        this.format = input('number', ...(ngDevMode ? [{ debugName: "format" }] : []));
+        /**
+         * Whether to hide the axis label.
+         */
+        this.labelHidden = input(false, { ...(ngDevMode ? { debugName: "labelHidden" } : {}), transform: booleanAttribute });
+        /**
+         * The text of the axis label.
+         */
+        this.labelText = input.required(...(ngDevMode ? [{ debugName: "labelText" }] : []));
+        /**
+         * The highest value to display on the axis. When unset, the axis scales to
+         * fit the plotted values.
+         */
+        this.max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : {}), transform: optionalNumberAttribute });
+        /**
+         * The lowest value to display on the axis. When unset, the axis scales to
+         * fit the plotted values.
+         */
+        this.min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : {}), transform: optionalNumberAttribute });
+        /**
+         * The scale type for the value axis.
+         * @default 'linear'
+         */
+        this.scaleType = input('linear', ...(ngDevMode ? [{ debugName: "scaleType" }] : []));
+        /**
+         * Formats a numeric value according to this axis's `format`, `currencyCode`,
+         * and the current locale.
+         * @internal
+         */
+        this.formatValue = computed(() => createSkyChartValueFormatter({
+            format: this.format(),
+            currencyCode: this.currencyCode(),
+            digits: this.digits(),
+            locale: this.#locale(),
+        }), ...(ngDevMode ? [{ debugName: "formatValue" }] : []));
+    }
+    #localeProvider;
+    #locale;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChartAxisValue, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: SkyChartAxisValue, isStandalone: true, selector: "sky-chart-axis-value", inputs: { currencyCode: { classPropertyName: "currencyCode", publicName: "currencyCode", isSignal: true, isRequired: false, transformFunction: null }, digits: { classPropertyName: "digits", publicName: "digits", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, labelHidden: { classPropertyName: "labelHidden", publicName: "labelHidden", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, scaleType: { classPropertyName: "scaleType", publicName: "scaleType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChartAxisValue, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'sky-chart-axis-value',
+                    template: '',
+                }]
+        }], propDecorators: { currencyCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyCode", required: false }] }], digits: [{ type: i0.Input, args: [{ isSignal: true, alias: "digits", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], labelHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelHidden", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: true }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], scaleType: [{ type: i0.Input, args: [{ isSignal: true, alias: "scaleType", required: false }] }] } });
+
+/**
+ * The scale key shared by every series' category axis. Cartesian charts always
+ * have exactly one category axis, so a single, stable key is sufficient.
+ */
+const CATEGORY_AXIS_ID = 'category';
+/**
+ * The scale key of the value axis. Cartesian charts have exactly one value
+ * axis, so a single, stable key is sufficient.
+ */
+const VALUE_AXIS_ID = 'value';
+/**
+ * Whether a series value is a floating `[start, end]` range rather than a
+ * single number. `Array.isArray` alone does not narrow readonly tuples, so
+ * the check is wrapped in an explicit type predicate.
+ */
+function isValueRange(value) {
+    return Array.isArray(value);
+}
+/**
+ * Resolves the axes and series into the data a chart needs to render, or
+ * `undefined` when a required axis or series is missing.
+ */
+function resolveCartesianData(categoryAxis, valueAxis, series) {
+    if (categoryAxis === undefined ||
+        valueAxis === undefined ||
+        series.length === 0) {
+        return undefined;
+    }
+    return { categoryAxis, valueAxis, series };
+}
+/**
+ * Builds the tabular representation of a cartesian chart for the accessible
+ * data table, formatting each series' values with the value axis's format.
+ * Floating `[start, end]` ranges render as "start – end", and null values
+ * render as empty cells, mirroring the gaps in the plot.
+ */
+function buildCartesianTable(categoryAxis, series, formatValue) {
+    return {
+        categoryLabel: categoryAxis.labelText(),
+        categories: categoryAxis.categories(),
+        series: series.map((chartSeries) => ({
+            label: chartSeries.labelText(),
+            values: chartSeries
+                .values()
+                .map((value) => formatCartesianValue(value, formatValue)),
+        })),
+    };
+}
+/**
+ * Formats a single plotted value: numbers use the value axis's format, a
+ * floating `[start, end]` range formats as "start – end", and `null` (a gap)
+ * formats as an empty string.
+ */
+function formatCartesianValue(value, formatValue) {
+    if (value === null) {
+        return '';
+    }
+    if (isValueRange(value)) {
+        return `${formatValue(value[0])} – ${formatValue(value[1])}`;
+    }
+    return formatValue(value);
+}
+/**
+ * Builds the themed styling shared by every cartesian scale from the resolved
+ * theme styles. Building it once keeps every axis visually consistent.
+ */
+function buildThemedScaleStyle(themeStyles) {
+    const { font, text, axis } = themeStyles;
+    return {
+        grid: {
+            color: axis.gridlineColor,
+            tickColor: axis.gridlineColor,
+            tickLength: axis.tickLength,
+        },
+        border: {
+            color: axis.lineColor,
+        },
+        ticks: {
+            color: text.color,
+            font: {
+                size: font.size,
+                family: font.family,
+                weight: font.weight,
+            },
+        },
+        title: {
+            color: text.deemphasizedColor,
+            font: {
+                size: font.size,
+                family: font.family,
+            },
+            padding: {
+                top: axis.titleGap,
+                bottom: axis.titleGap,
+            },
+        },
+    };
+}
+/**
+ * Restricts a logarithmic value axis's ticks to powers of ten. Chart.js's
+ * logarithmic tick generator inserts intermediate ticks within each decade,
+ * whose gridlines render at visually uneven intervals; decade-only gridlines
+ * read evenly. When the generated ticks span fewer than two decades, they are
+ * kept as-is so a narrow range is not left nearly unlabeled.
+ */
+function keepDecadeLogTicks(axis) {
+    const decadeTicks = axis.ticks.filter((tick) => {
+        const magnitude = Math.log10(tick.value);
+        return Math.abs(magnitude - Math.round(magnitude)) < 1e-9;
+    });
+    if (decadeTicks.length >= 2) {
+        axis.ticks = decadeTicks;
+    }
+}
+/**
+ * Builds the category and value axis scales for a cartesian chart. The category
+ * axis draws no grid lines across the chart area, and the value axis draws them
+ * to aid value comparison. When `stacked` is set, both the category and value
+ * scales stack so that series accumulate into a single bar per category.
+ */
+function buildCartesianScales(options) {
+    const { categoryAxis, valueAxis, isHorizontal, isStacked = false, themeStyles, } = options;
+    const indexAxis = isHorizontal ? 'y' : 'x';
+    const valueDirection = isHorizontal ? 'x' : 'y';
+    const base = buildThemedScaleStyle(themeStyles);
+    const formatValue = valueAxis.formatValue();
+    const scaleType = valueAxis.scaleType();
+    return {
+        [CATEGORY_AXIS_ID]: {
+            type: 'category',
+            axis: indexAxis,
+            position: isHorizontal ? 'left' : 'bottom',
+            stacked: isStacked,
+            grid: {
+                display: true,
+                drawTicks: true,
+                // The category axis marks discrete groups, so grid lines running
+                // between the bars add clutter without aiding value comparison.
+                drawOnChartArea: false,
+                ...base.grid,
+            },
+            border: {
+                display: true,
+                ...base.border,
+            },
+            ticks: {
+                ...base.ticks,
+                major: { enabled: true },
+            },
+            title: {
+                display: !categoryAxis.labelHidden(),
+                text: categoryAxis.labelText(),
+                ...base.title,
+            },
+        },
+        [VALUE_AXIS_ID]: {
+            type: scaleType,
+            axis: valueDirection,
+            position: isHorizontal ? 'bottom' : 'left',
+            stacked: isStacked,
+            min: valueAxis.min(),
+            max: valueAxis.max(),
+            ...(scaleType === 'logarithmic' && {
+                afterBuildTicks: keepDecadeLogTicks,
+            }),
+            grid: {
+                ...base.grid,
+                drawOnChartArea: true,
+            },
+            border: {
+                ...base.border,
+            },
+            ticks: {
+                ...base.ticks,
+                padding: 0,
+                callback: (tickValue) => formatValue(Number(tickValue)),
+            },
+            title: {
+                display: !valueAxis.labelHidden(),
+                text: valueAxis.labelText(),
+                ...base.title,
+            },
+        },
+    };
+}
+/**
+ * Builds a tooltip `label` callback that formats each point's value using the
+ * value axis's format.
+ */
+function buildValueTooltipLabel(formatValue, valueDirection) {
+    return (context) => {
+        const item = context;
+        // A floating bar carries its [start, end] range in the raw data element;
+        // `parsed` holds only the end value.
+        const formatted = isValueRange(item.raw)
+            ? formatCartesianValue(item.raw, formatValue)
+            : formatValue(item.parsed[valueDirection] ?? 0);
+        const label = item.dataset.label;
+        return label ? `${label}: ${formatted}` : formatted;
+    };
+}
+
+Chart.register(BarController, BarElement, CategoryScale, LinearScale, LogarithmicScale, Legend, Tooltip);
+/**
+ * Renders a Chart.js chart onto a canvas and manages its lifecycle (create,
+ * update, and destroy) from a reactive configuration. Plot components such as
+ * `sky-chart-bar` build the configuration and delegate rendering here.
+ * @internal
+ */
+class SkyChartJs {
+    #chart;
+    constructor() {
+        /**
+         * The Chart.js configuration to render.
+         */
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.chartRef = viewChild.required('chartRef', {
+            read: ElementRef,
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.#chart?.destroy();
+            this.#chart = undefined;
+        });
+        afterRenderEffect(() => {
+            const config = this.config();
+            if (this.#chart) {
+                this.#chart.data = config.data;
+                this.#chart.options = config.options;
+                this.#chart.update();
+            }
+            else {
+                this.#chart = new Chart(this.chartRef().nativeElement, config);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChartJs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: SkyChartJs, isStandalone: true, selector: "sky-chart-js", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chartRef"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `<canvas #chartRef aria-hidden="true"></canvas>`, isInline: true, styles: [":host{display:block;position:relative}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChartJs, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'sky-chart-js', template: `<canvas #chartRef aria-hidden="true"></canvas>`, styles: [":host{display:block;position:relative}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], chartRef: [{ type: i0.ViewChild, args: ['chartRef', { ...{
+                            read: ElementRef,
+                        }, isSignal: true }] }] } });
+
+/**
+ * Builds the Chart.js `options` shared by every SKY chart type: responsiveness,
+ * layout, interaction, hover, animation, and the themed legend and tooltip.
+ */
+function buildBaseChartJsOptions(themeStyles) {
+    const { font, text, tooltip } = themeStyles;
+    const bodyFont = {
+        family: font.family,
+        size: font.size,
+        weight: font.weight,
+        lineHeight: text.lineHeight,
+    };
+    const options = {
+        // Responsiveness: fill the container and re-layout on resize.
+        responsive: true,
+        maintainAspectRatio: false,
+        layout: { padding: 0 },
+        // Interaction: hovering and tooltips target the nearest point precisely.
+        interaction: { mode: 'nearest', intersect: true },
+        hover: { mode: 'nearest', intersect: true },
+        animation: { duration: 400, easing: 'easeInOutQuart' },
+        plugins: {
+            legend: {
+                position: 'bottom',
+                labels: {
+                    usePointStyle: true,
+                    pointStyle: 'circle',
+                    color: text.color,
+                    font: bodyFont,
+                },
+            },
+            tooltip: {
+                enabled: true,
+                position: 'average',
+                displayColors: true,
+                usePointStyle: true,
+                // Interaction
+                mode: 'index',
+                intersect: false,
+                // Typography
+                titleColor: text.color,
+                titleFont: {
+                    ...bodyFont,
+                    weight: font.emphasizedWeight,
+                },
+                bodyColor: text.color,
+                bodyFont,
+                footerColor: text.color,
+                footerFont: bodyFont,
+                // Container
+                padding: { ...tooltip.inset },
+                cornerRadius: tooltip.cornerRadius,
+                borderWidth: tooltip.borderWidth,
+                caretSize: 8,
+                caretPadding: 4,
+                // Color-swatch icon
+                boxHeight: tooltip.iconSize,
+                boxWidth: tooltip.iconSize,
+                boxPadding: tooltip.iconGap,
+                multiKeyBackground: 'transparent',
+                // Text spacing.
+                titleMarginBottom: tooltip.titleGap,
+                bodySpacing: tooltip.bodyGap,
+                footerMarginTop: tooltip.titleGap,
+                // Colors.
+                backgroundColor: tooltip.backgroundColor,
+                borderColor: tooltip.borderColor,
+            },
+        },
+    };
+    return options;
+}
+/**
+ * Extends the shared, themed base options with a chart-type-specific configuration.
+ * @internal
+ */
+function extendBaseChartJsConfig(themeStyles, overrides) {
+    const base = buildBaseChartJsOptions(themeStyles);
+    const options = {
+        ...base,
+        ...overrides.options,
+        plugins: {
+            ...base.plugins,
+            ...overrides.options.plugins,
+            legend: {
+                ...base.plugins?.legend,
+                ...overrides.options.plugins?.legend,
+            },
+            tooltip: {
+                ...base.plugins?.tooltip,
+                ...overrides.options.plugins?.tooltip,
+            },
+        },
+    };
+    return {
+        ...overrides,
+        options,
+    };
+}
+
+/**
+ * Bridges a chart's tabular representation from the plotted chart component to
+ * the data table modal. Provided at the `sky-chart` level so each chart has its
+ * own instance.
+ * @internal
+ */
+class SkyChartTableService {
+    constructor() {
+        /**
+         * The current tabular representation of the chart, or `undefined` when the
+         * chart has no data to represent.
+         */
+        this.table = signal(undefined, ...(ngDevMode ? [{ debugName: "table" }] : []));
+        /**
+         * The current accessible summary of the chart, or `undefined` when the chart
+         * has no data to represent.
+         */
+        this.summary = signal(undefined, ...(ngDevMode ? [{ debugName: "summary" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChartTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChartTableService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChartTableService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Resolves the active SKY theme's chart styling for the given host element.
+ * When the SKY theme styles are not loaded, the chart renders un-themed with
+ * Chart.js defaults.
+ * @internal
+ */
+function resolveChartThemeStyles(host) {
+    const styles = getComputedStyle(host);
+    // Custom properties keep `calc()` expressions unevaluated (for example, the
+    // SKY line-height tokens are authored as `calc(20/15)`). The probe assigns
+    // those raw values to a standard property, which the browser evaluates, and
+    // reads the resolved value back. It is created lazily — only for values the
+    // fast path cannot parse — and torn down once resolution finishes.
+    const probe = createTokenProbe(host);
+    // `rem` conversions share one root font-size read; see `remToPx`.
+    const rootFontSize = Number.parseFloat(getComputedStyle(host.ownerDocument.documentElement).fontSize);
+    try {
+        // The chart's height bounds are authored once, as custom properties on
+        // the `sky-chart` host (see `chart.scss`), so the plot heights resolved
+        // here always match the loading state's reserved height. Plots must
+        // render inside `sky-chart` (enforced by `SkyChartPlot`), so the
+        // properties are always in scope; like the theme tokens, they only fail
+        // to resolve in a genuinely broken setup.
+        const minHeight = readNumber(styles, probe, '--sky-chart-height-min', rootFontSize);
+        const maxHeight = readNumber(styles, probe, '--sky-chart-height-max', rootFontSize);
+        const viewportHeight = readString(styles, '--sky-chart-height-viewport');
+        return {
+            font: {
+                family: readString(styles, '--sky-font-family-primary'),
+                size: readNumber(styles, probe, '--sky-font-size-body-s', rootFontSize),
+                weight: readNumber(styles, probe, '--sky-font-style-body-s', rootFontSize),
+                emphasizedWeight: readNumber(styles, probe, '--sky-font-style-emphasized', rootFontSize),
+            },
+            text: {
+                color: readString(styles, '--sky-color-text-default'),
+                deemphasizedColor: readString(styles, '--sky-color-text-deemphasized'),
+                lineHeight: readLineHeight(styles, probe),
+            },
+            height: {
+                min: minHeight,
+                max: maxHeight,
+                default: `clamp(${minHeight}px, ${viewportHeight}, ${maxHeight}px)`,
+            },
+            axis: {
+                lineColor: readString(styles, '--sky-color-viz-axis'),
+                gridlineColor: readString(styles, '--sky-color-viz-gridline'),
+                tickLength: readNumber(styles, probe, '--sky-size-chart-tick_length-measure', rootFontSize),
+                titleGap: readNumber(styles, probe, '--sky-space-stacked-xs', rootFontSize),
+            },
+            series: {
+                categoricalPalette: Array.from({ length: 8 }, (_, index) => readString(styles, `--sky-color-viz-category-${index + 1}`)),
+            },
+            tooltip: {
+                backgroundColor: readString(styles, '--sky-color-background-container-base'),
+                borderColor: readString(styles, '--sky-color-border-container-base'),
+                borderWidth: readNumber(styles, probe, '--sky-border-width-container-base', rootFontSize),
+                cornerRadius: readNumber(styles, probe, '--sky-border-radius-s', rootFontSize),
+                inset: {
+                    top: readNumber(styles, probe, '--sky-comp-chart-tooltip-space-inset-top', rootFontSize),
+                    right: readNumber(styles, probe, '--sky-comp-chart-tooltip-space-inset-right', rootFontSize),
+                    bottom: readNumber(styles, probe, '--sky-comp-chart-tooltip-space-inset-bottom', rootFontSize),
+                    left: readNumber(styles, probe, '--sky-comp-chart-tooltip-space-inset-left', rootFontSize),
+                },
+                iconSize: readNumber(styles, probe, '--sky-size-icon-xs', rootFontSize),
+                iconGap: readNumber(styles, probe, '--sky-space-gap-icon-s', rootFontSize),
+                titleGap: readNumber(styles, probe, '--sky-space-stacked-s', rootFontSize),
+                bodyGap: readNumber(styles, probe, '--sky-space-stacked-0', rootFontSize),
+            },
+            bar: {
+                borderColor: readString(styles, '--sky-color-background-container-base'),
+                borderRadius: readNumber(styles, probe, '--sky-border-radius-xs', rootFontSize),
+                vertical: {
+                    baseBarThickness: remToPx('2rem', rootFontSize),
+                    minBarThickness: remToPx('0.75rem', rootFontSize),
+                    maxBarThickness: remToPx('7.5rem', rootFontSize),
+                },
+                horizontal: {
+                    minBarThickness: remToPx('0.75rem', rootFontSize),
+                    maxBarThickness: remToPx('1rem', rootFontSize),
+                    minCategoryGap: remToPx('0.5rem', rootFontSize),
+                },
+            },
+        };
+    }
+    finally {
+        probe.destroy();
+    }
+}
+/**
+ * Derives the default-theme override property for a SKY theme token. The
+ * modern theme's `--sky-*` tokens are not defined in the SKY UX default
+ * theme, so `sky-chart` provides `--sky-override-chart-*` values scoped to
+ * the default theme (see `chart.scss`). The override wins when present,
+ * matching the `var(--sky-override-x, var(--sky-x))` convention used in
+ * component CSS.
+ */
+function overrideProperty(property) {
+    return `--sky-override-chart-${property.slice('--sky-'.length)}`;
+}
+/**
+ * Reads a CSS custom property — preferring its default-theme override —
+ * returning an empty string when neither is set. An empty string reaching
+ * Chart.js renders un-themed rather than broken.
+ */
+function readString(styles, property) {
+    return (styles.getPropertyValue(overrideProperty(property)).trim() ||
+        styles.getPropertyValue(property).trim());
+}
+/**
+ * Reads a numeric CSS custom property — preferring its default-theme
+ * override — as a number, converting `rem` values to pixels using the root
+ * font size. Values the fast path cannot parse (such as `calc()` lengths) are
+ * resolved through the probe. Every token has a default defined in the
+ * `sky-default-overrides` mixin in `chart.scss`, so a value only fails to
+ * resolve — returning `NaN` — in a genuinely broken theme.
+ */
+function readNumber(styles, probe, property, rootFontSize) {
+    const raw = readString(styles, property);
+    if (raw === '') {
+        return Number.NaN;
+    }
+    const value = Number.parseFloat(raw);
+    if (!Number.isNaN(value)) {
+        return raw.endsWith('rem') ? remToPx(raw, rootFontSize) : value;
+    }
+    // A non-numeric literal such as a `calc()` length; resolve it via the probe.
+    return probe.resolveLength(raw) ?? Number.NaN;
+}
+/**
+ * Converts a `rem` length to pixels using the document root font size. `rem` is
+ * defined relative to the root element (never the host), so the root font size
+ * is the correct reference — resolved once per `resolveChartThemeStyles` call
+ * and shared by every conversion. Chart.js reasons in pixels when it lays out
+ * a canvas, so `rem`-based sizing has to be resolved before it reaches the
+ * chart.
+ */
+function remToPx(rem, rootFontSize) {
+    return Number.parseFloat(rem) * rootFontSize;
+}
+/**
+ * Reads the body-s line height as a multiple of the font size. A plain
+ * numeric value (such as the default theme's override) parses directly; the
+ * modern theme's token is a `calc()` expression that `getComputedStyle`
+ * leaves unevaluated on custom properties, so it is resolved through the
+ * probe. Its default is defined in the `sky-default-overrides` mixin in
+ * `chart.scss`, so it only fails to resolve — returning `NaN` — in a
+ * genuinely broken theme.
+ */
+function readLineHeight(styles, probe) {
+    const raw = readString(styles, '--sky-font-line_height-body-s');
+    if (raw === '') {
+        return Number.NaN;
+    }
+    const value = Number.parseFloat(raw);
+    if (!Number.isNaN(value)) {
+        return value;
+    }
+    // A non-numeric expression such as `calc(20/15)`; resolve it via the probe.
+    return probe.resolveNumber(raw) ?? Number.NaN;
+}
+/**
+ * Creates a {@link SkyChartTokenProbe} bound to `host`. The probe element is
+ * created on first use — so resolving only fast-path values costs nothing —
+ * and inherits `host`'s theme context.
+ */
+function createTokenProbe(host) {
+    let element;
+    function probeElement() {
+        if (!element) {
+            element = document.createElement('span');
+            element.style.position = 'absolute';
+            element.style.width = '0';
+            element.style.height = '0';
+            element.style.overflow = 'hidden';
+            element.style.visibility = 'hidden';
+            host.appendChild(element);
+        }
+        return element;
+    }
+    // Assigns the raw value to a carrier property the browser evaluates, then
+    // reads the resolved value back. An invalid value is rejected by the CSSOM,
+    // leaving the carrier empty, which signals it could not be resolved.
+    function resolveWith(carrier, value) {
+        const el = probeElement();
+        el.style[carrier] = '';
+        el.style[carrier] = value;
+        return el.style[carrier] === ''
+            ? undefined
+            : Number.parseFloat(getComputedStyle(el)[carrier]);
+    }
+    return {
+        resolveLength: (value) => resolveWith('paddingLeft', value),
+        resolveNumber: (value) => resolveWith('flexGrow', value),
+        destroy: () => element?.remove(),
+    };
+}
+
+/**
+ * Base class for chart plot components (for example, `sky-chart-bar`). Owns the
+ * bridge that publishes each plot's tabular representation to the accessible
+ * data table, so every plot type shares the same lifecycle. Subclasses
+ * implement `getChartTable`, `getAccessibleSummary`, and their own rendering.
+ *
+ * Plots must be rendered inside `sky-chart`: the wrapper provides the data
+ * table bridge and the default-theme styling the plot resolves its themed
+ * values from.
+ * @internal
+ */
+class SkyChartPlot {
+    #elementRef = inject(ElementRef);
+    #tableSvc;
+    constructor() {
+        const tableSvc = inject(SkyChartTableService, { optional: true });
+        if (!tableSvc) {
+            const tagName = this.#elementRef.nativeElement.tagName.toLowerCase();
+            throw new Error(`The <${tagName}> component must be rendered inside a <sky-chart> ` +
+                'component.');
+        }
+        this.#tableSvc = tableSvc;
+        inject(DestroyRef).onDestroy(() => {
+            this.#tableSvc.table.set(undefined);
+            this.#tableSvc.summary.set(undefined);
+        });
+        afterRenderEffect(() => {
+            this.#tableSvc.table.set(this.getChartTable());
+            this.#tableSvc.summary.set(this.getAccessibleSummary());
+        });
+    }
+    /**
+     * Resolves the active theme's chart styling against this plot's element.
+     * Chart.js renders to a canvas that cannot read CSS variables, so themed
+     * tokens must be resolved to concrete values against the DOM.
+     */
+    getThemeStyles() {
+        return resolveChartThemeStyles(this.#elementRef.nativeElement);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChartPlot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: SkyChartPlot, isStandalone: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChartPlot, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [] });
+
+/**
+ * Defines a single series of values to plot on a bar chart, aligned to the
+ * category axis by index.
+ *
+ * @preview
+ */
+class SkyChartBarSeries {
+    constructor() {
+        /**
+         * The text that identifies this series in the legend and tooltips.
+         */
+        this.labelText = input.required(...(ngDevMode ? [{ debugName: "labelText" }] : []));
+        /**
+         * The stack this series belongs to. When a bar chart's `seriesLayout`
+         * is `stacked`, series that share the same `stackId` value accumulate into
+         * a single bar per category, and series with different `stackId` values
+         * are placed side by side. Omit to stack every series into one bar per
+         * category. Has no effect when `seriesLayout` is `grouped`.
+         */
+        this.stackId = input(...(ngDevMode ? [undefined, { debugName: "stackId" }] : []));
+        /**
+         * The values for this series, aligned to the category axis categories by
+         * index. A number renders a standard bar measured from the value axis's
+         * baseline, a `[start, end]` tuple renders a floating bar spanning the two
+         * values, and a `null` value renders a gap in the chart and an empty cell
+         * in the data table.
+         */
+        this.values = input.required(...(ngDevMode ? [{ debugName: "values" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChartBarSeries, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: SkyChartBarSeries, isStandalone: true, selector: "sky-chart-bar-series", inputs: { labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: true, transformFunction: null }, stackId: { classPropertyName: "stackId", publicName: "stackId", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChartBarSeries, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'sky-chart-bar-series',
+                    template: '',
+                }]
+        }], propDecorators: { labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: true }] }], stackId: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackId", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: true }] }] } });
+
+/**
+ * Renders a bar chart from a category axis, a value axis, and one or more
+ * series.
+ *
+ * @preview
+ */
+class SkyChartBar extends SkyChartPlot {
+    #themeSettings;
+    constructor() {
+        super();
+        this.#themeSettings = toSignal(inject(SkyThemeService, { optional: true })?.settingsChange.pipe(map$1((change) => change.currentSettings)) ?? EMPTY, { initialValue: undefined });
+        /**
+         * The orientation of the bars.
+         * @default 'vertical'
+         */
+        this.orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+        /**
+         * How the bars of multiple series are arranged within each category.
+         * `grouped` places the series' bars side by side; `stacked` accumulates the
+         * bars into a single bar per category. When `stacked`, assign each series a
+         * `stackId` value to subdivide the bar into side-by-side stacks (grouped,
+         * stacked bars). This has no visible effect when the chart has a single
+         * series.
+         * @default 'grouped'
+         */
+        this.seriesLayout = input('grouped', ...(ngDevMode ? [{ debugName: "seriesLayout" }] : []));
+        this.categoryAxis = contentChild(SkyChartAxisCategory, ...(ngDevMode ? [{ debugName: "categoryAxis" }] : []));
+        this.valueAxis = contentChild(SkyChartAxisValue, ...(ngDevMode ? [{ debugName: "valueAxis" }] : []));
+        this.series = contentChildren(SkyChartBarSeries, ...(ngDevMode ? [{ debugName: "series" }] : []));
+        this.chartJsConfig = computed(() => this.#getChartJsConfig(), ...(ngDevMode ? [{ debugName: "chartJsConfig" }] : []));
+        /**
+         * The height to apply to the rendered chart. Chart.js runs with
+         * `maintainAspectRatio: false`, so its container must be given an explicit
+         * height. Vertical charts use the themed default; horizontal charts grow
+         * with their content so every bar stays legible.
+         */
+        this.chartHeight = computed(() => this.#getChartHeight(), ...(ngDevMode ? [{ debugName: "chartHeight" }] : []));
+        const logger = inject(SkyLogService);
+        // Values align to categories by index, so a length mismatch silently
+        // misaligns or drops data. Warn about the one alignment mistake that is
+        // mechanically detectable.
+        afterRenderEffect(() => {
+            const categoryCount = this.categoryAxis()?.categories().length;
+            if (categoryCount === undefined) {
+                return;
+            }
+            for (const chartSeries of this.series()) {
+                const valueCount = chartSeries.values().length;
+                if (valueCount !== categoryCount) {
+                    logger.warn(`The <sky-chart-bar-series> labeled "${chartSeries.labelText()}" ` +
+                        `has ${valueCount} values, but the category axis has ` +
+                        `${categoryCount} categories. Values align to categories by ` +
+                        'index, so each series must provide one value per category.');
+                }
+            }
+        });
+    }
+    getChartTable() {
+        const data = resolveCartesianData(this.categoryAxis(), this.valueAxis(), this.series());
+        if (!data) {
+            return undefined;
+        }
+        return buildCartesianTable(data.categoryAxis, data.series, data.valueAxis.formatValue());
+    }
+    getAccessibleSummary() {
+        const data = resolveCartesianData(this.categoryAxis(), this.valueAxis(), this.series());
+        if (!data) {
+            return undefined;
+        }
+        return {
+            resourceKey: 'skyux_charts.chart.bar.accessible_summary',
+            args: [data.series.length, data.categoryAxis.categories().length],
+        };
+    }
+    #getChartJsConfig() {
+        const data = resolveCartesianData(this.categoryAxis(), this.valueAxis(), this.series());
+        if (!data) {
+            return undefined;
+        }
+        const { categoryAxis, valueAxis, series } = data;
+        // Read the theme signal so the config rebuilds when the theme changes,
+        // then resolve the themed CSS custom properties to concrete values.
+        this.#themeSettings();
+        const themeStyles = this.getThemeStyles();
+        const categorical = themeStyles.series.categoricalPalette;
+        const isHorizontal = this.orientation() === 'horizontal';
+        const isStacked = this.seriesLayout() === 'stacked';
+        const indexAxis = isHorizontal ? 'y' : 'x';
+        const valueDirection = isHorizontal ? 'x' : 'y';
+        const formatValue = valueAxis.formatValue();
+        // Horizontal bars are rendered at an explicit thickness (see below), which
+        // the container height is also derived from; resolve it once so the two
+        // always agree.
+        const horizontalBarThickness = isHorizontal
+            ? this.#getHorizontalBarSpacing(themeStyles).barThickness
+            : undefined;
+        // Vertical bars fill their responsive width; the fill percentages are
+        // tuned by category count (see below).
+        const verticalSpacing = isHorizontal
+            ? undefined
+            : this.#getVerticalBarElementSpacing(categoryAxis.categories().length);
+        const datasets = series.map((chartSeries, index) => {
+            const dataset = {
+                label: chartSeries.labelText(),
+                // Chart.js mutates the arrays it is given, so deep-copy the readonly
+                // input, including floating [start, end] ranges.
+                data: chartSeries
+                    .values()
+                    .map((value) => (isValueRange(value) ? [...value] : value)),
+                backgroundColor: categorical[index % categorical.length],
+            };
+            if (isHorizontal) {
+                // Render bars at the exact thickness the container height was computed
+                // for. Without this, Chart.js shrinks each bar to a fraction of its
+                // category slot, ignoring the minimum thickness.
+                dataset.barThickness = horizontalBarThickness;
+            }
+            else {
+                // Shape the whitespace around vertical bars and cap their width so
+                // sparse charts do not render unusably wide bars.
+                dataset.categoryPercentage = verticalSpacing?.categoryPercentage;
+                dataset.barPercentage = verticalSpacing?.barPercentage;
+                dataset.maxBarThickness = themeStyles.bar.vertical.maxBarThickness;
+            }
+            // Stack groups only apply to a stacked layout; on a grouped layout the
+            // scales are not stacked, so a shared stack id would overlap bars instead
+            // of accumulating them.
+            const stackId = chartSeries.stackId();
+            if (isStacked && stackId !== undefined) {
+                dataset.stack = stackId;
+            }
+            if (isHorizontal) {
+                dataset.xAxisID = VALUE_AXIS_ID;
+                dataset.yAxisID = CATEGORY_AXIS_ID;
+            }
+            else {
+                dataset.yAxisID = VALUE_AXIS_ID;
+                dataset.xAxisID = CATEGORY_AXIS_ID;
+            }
+            return dataset;
+        });
+        return extendBaseChartJsConfig(themeStyles, {
+            type: 'bar',
+            data: {
+                // Chart.js mutates the arrays it is given, so copy the readonly input.
+                labels: [...categoryAxis.categories()],
+                datasets,
+            },
+            options: {
+                interaction: {
+                    // Index hits along the category axis's direction (see the category scale's
+                    // `axis` in buildCartesianScales); this is a cartesian direction, not a scale ID.
+                    axis: isHorizontal ? 'y' : 'x',
+                },
+                elements: {
+                    bar: {
+                        borderWidth: 1,
+                        borderColor: themeStyles.bar.borderColor,
+                        borderRadius: themeStyles.bar.borderRadius,
+                    },
+                },
+                indexAxis,
+                scales: buildCartesianScales({
+                    categoryAxis,
+                    valueAxis,
+                    isHorizontal,
+                    isStacked,
+                    themeStyles,
+                }),
+                plugins: {
+                    legend: {
+                        // Show the legend only when there are multiple series to
+                        // distinguish; a single-series chart's legend is redundant.
+                        display: datasets.length > 1,
+                    },
+                    tooltip: {
+                        callbacks: {
+                            label: buildValueTooltipLabel(formatValue, valueDirection),
+                        },
+                    },
+                },
+            },
+        });
+    }
+    /**
+     * Resolves the height to apply to the chart container. A vertical chart uses
+     * the themed default height. A horizontal chart grows with its content:
+     * every category needs enough room for its bars, so the height is derived
+     * from the bar count and clamped to the minimum so small charts stay legible.
+     */
+    #getChartHeight() {
+        // Read the theme signal so the height recomputes when the theme changes.
+        this.#themeSettings();
+        const themeStyles = this.getThemeStyles();
+        if (this.orientation() !== 'horizontal') {
+            return themeStyles.height.default;
+        }
+        const { barThickness, categoryGap, categoryCount, barsPerCategory } = this.#getHorizontalBarSpacing(themeStyles);
+        const rowHeight = barThickness * barsPerCategory + categoryGap;
+        const totalRowsHeight = categoryCount * rowHeight;
+        const computedHeight = this.#computeChartOverhead(themeStyles) + totalRowsHeight;
+        // Horizontal charts may grow without bound, but never shrink below the
+        // themed minimum.
+        const clampedHeight = Math.max(themeStyles.height.min, computedHeight);
+        return `${clampedHeight}px`;
+    }
+    /**
+     * Resolves the horizontal bar layout — the per-bar thickness, the gap between
+     * categories, and the counts they derive from — shared by the container
+     * height and the datasets so the two always agree.
+     */
+    #getHorizontalBarSpacing(themeStyles) {
+        const seriesCount = this.series().length;
+        // Chart.js renders one row per category-axis label, so the row count must
+        // come from the category axis — a sparse series with fewer values than
+        // categories must not shrink the height. The axis is always present when
+        // the chart (and therefore this height) renders, so the fallback is
+        // defensive only.
+        /* istanbul ignore next */
+        const categoryCount = this.categoryAxis()?.categories().length ?? 0;
+        // A stacked layout renders one bar per distinct stack group — series that
+        // share a stack group (or all lack one) accumulate into a single bar — so
+        // the number of bars per category is the count of distinct stacks, not one.
+        const barsPerCategory = this.seriesLayout() === 'stacked'
+            ? new Set(this.series().map((chartSeries) => chartSeries.stackId()))
+                .size
+            : seriesCount;
+        const totalBars = categoryCount * barsPerCategory;
+        return {
+            ...this.#computeHorizontalBarElementSpacing(totalBars, themeStyles),
+            categoryCount,
+            barsPerCategory,
+        };
+    }
+    /**
+     * Derives the per-bar thickness and the gap between categories for a
+     * horizontal chart. Charts with few bars use the full bar thickness and a
+     * tight gap; as the bar count grows the bars taper toward the minimum
+     * thickness while the gap widens so grouped bars stay visually separated.
+     */
+    #computeHorizontalBarElementSpacing(totalBars, themeStyles) {
+        const { minBarThickness, maxBarThickness, minCategoryGap } = themeStyles.bar.horizontal;
+        const taperingStart = 12;
+        const taperingStop = 36;
+        const lowCategoryGapPercentage = 0.375;
+        const highCategoryGapPercentage = 0.75;
+        if (totalBars < taperingStart) {
+            // Few bars: use the full thickness and target a fraction of the bar
+            // width for the gap. No minimum is applied because the bars are already
+            // at their full thickness.
+            return {
+                barThickness: maxBarThickness,
+                categoryGap: maxBarThickness * lowCategoryGapPercentage,
+            };
+        }
+        // Many bars: taper the thickness toward the minimum and widen the gap so
+        // grouped bars stay separated, but never below the minimum category gap.
+        const taperRange = taperingStop - taperingStart;
+        const taperFraction = Math.min(1, (totalBars - taperingStart) / taperRange);
+        const thicknessRange = maxBarThickness - minBarThickness;
+        const taperedThickness = Math.round(maxBarThickness - taperFraction * thicknessRange);
+        const barThickness = Math.max(minBarThickness, taperedThickness);
+        return {
+            barThickness,
+            categoryGap: Math.max(minCategoryGap, barThickness * highCategoryGapPercentage),
+        };
+    }
+    /**
+     * Tunes the category and bar fill percentages for a vertical chart. Vertical
+     * bars fill their responsive width up to `bar.vertical.maxBarThickness`, so
+     * these percentages shape the surrounding whitespace: sparse charts keep the
+     * bars near the base width with room around them, while dense charts widen
+     * the fill so bars use the available width (approaching the minimum). Chart.js
+     * has no minimum-thickness option, so the base and minimum widths are soft
+     * targets rather than hard pixel constraints.
+     */
+    #getVerticalBarElementSpacing(categoryCount) {
+        const barPercentage = 0.85;
+        const categoryPercentage = categoryCount <= 3 ? 0.4 : categoryCount >= 12 ? 0.95 : 0.7;
+        return { categoryPercentage, barPercentage };
+    }
+    /**
+     * Estimates the fixed vertical space a horizontal chart needs outside its
+     * plotted rows: the bottom value axis (its tick marks, a row of tick labels,
+     * and its title) plus the legend row when multiple series are shown. Added
+     * to the rows' height, this keeps the plotted area sized to its bars rather
+     * than absorbing the chrome.
+     */
+    #computeChartOverhead(themeStyles) {
+        const { axis, font, text, tooltip } = themeStyles;
+        const lineHeight = font.size * text.lineHeight;
+        // Bottom value axis: tick marks, a row of tick labels, and the axis title.
+        const valueAxisHeight = axis.tickLength + lineHeight + axis.titleGap + lineHeight;
+        // The legend only renders with multiple series.
+        const legendHeight = this.series().length > 1
+            ? Math.max(tooltip.iconSize, lineHeight) + axis.titleGap
+            : 0;
+        return valueAxisHeight + legendHeight;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChartBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyChartBar, isStandalone: true, selector: "sky-chart-bar", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, seriesLayout: { classPropertyName: "seriesLayout", publicName: "seriesLayout", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "categoryAxis", first: true, predicate: SkyChartAxisCategory, descendants: true, isSignal: true }, { propertyName: "valueAxis", first: true, predicate: SkyChartAxisValue, descendants: true, isSignal: true }, { propertyName: "series", predicate: SkyChartBarSeries, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (chartJsConfig(); as config) {\n  <sky-chart-js [config]=\"config\" [style.height]=\"chartHeight()\" />\n}\n", dependencies: [{ kind: "component", type: SkyChartJs, selector: "sky-chart-js", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChartBar, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyChartJs], selector: 'sky-chart-bar', template: "@if (chartJsConfig(); as config) {\n  <sky-chart-js [config]=\"config\" [style.height]=\"chartHeight()\" />\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], seriesLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "seriesLayout", required: false }] }], categoryAxis: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SkyChartAxisCategory), { isSignal: true }] }], valueAxis: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SkyChartAxisValue), { isSignal: true }] }], series: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SkyChartBarSeries), { isSignal: true }] }] } });
+
 /* istanbul ignore file */
 /**
  * NOTICE: DO NOT MODIFY THIS FILE!
@@ -18,6 +1139,9 @@ import { SkyHelpInlineModule } from '@skyux/help-inline';
  */
 const RESOURCES = {
     'EN-US': {
+        'skyux_charts.chart.bar.accessible_summary': {
+            message: "Bar chart. Number of series: {0}. Number of categories: {1}. A data table is available from the chart's context menu.",
+        },
         'skyux_charts.chart.controls.context_menu.accessible_name': {
             message: 'Context menu for {0}',
         },
@@ -25,6 +1149,9 @@ const RESOURCES = {
             message: 'View data table',
         },
         'skyux_charts.data_table_modal.close_button': { message: 'Close' },
+        'skyux_charts.data_table_modal.table_region_label': {
+            message: 'Data table for {0}',
+        },
     },
 };
 SkyLibResourcesService.addResources(RESOURCES);
@@ -43,37 +1170,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }] });
 
-class SkyChartDataTableModalContext {
+class SkyChartTableModalContext {
 }
-class SkyChartDataTableModal {
+class SkyChartTableModal {
     constructor() {
-        this.context = inject(SkyChartDataTableModalContext);
+        this.context = inject(SkyChartTableModalContext);
         this.modal = inject(SkyModalInstance);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChartDataTableModal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyChartDataTableModal, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<sky-modal [headingText]=\"context.headingText\">\n  <sky-modal-content> Chart data table, here. </sky-modal-content>\n  <sky-modal-footer>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"modal.close()\">\n      {{ 'skyux_charts.data_table_modal.close_button' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "ngmodule", type: SkyChartsResourcesModule }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i1.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i1.λ2, selector: "sky-modal-content" }, { kind: "component", type: i1.λ3, selector: "sky-modal-footer" }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChartTableModal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyChartTableModal, isStandalone: true, selector: "sky-chart-table-modal", ngImport: i0, template: "<sky-modal [headingText]=\"context.headingText\">\n  <sky-modal-content>\n    @if (context.table; as table) {\n      <div\n        class=\"sky-chart-data-table-wrapper\"\n        role=\"region\"\n        tabindex=\"0\"\n        [attr.aria-label]=\"\n          'skyux_charts.data_table_modal.table_region_label'\n            | skyLibResources: context.headingText\n        \"\n      >\n        <table class=\"sky-chart-data-table\">\n          <thead>\n            <tr>\n              <th scope=\"col\">\n                {{ table.categoryLabel }}\n              </th>\n              @for (series of table.series; track $index) {\n                <th scope=\"col\">\n                  {{ series.label }}\n                </th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            @for (\n              category of table.categories;\n              track $index;\n              let rowIndex = $index\n            ) {\n              <tr>\n                <th scope=\"row\">\n                  {{ category }}\n                </th>\n                @for (series of table.series; track $index) {\n                  <td>\n                    {{ series.values[rowIndex] }}\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-link sky-chart-table-modal-close\"\n      type=\"button\"\n      (click)=\"modal.close()\"\n    >\n      {{ 'skyux_charts.data_table_modal.close_button' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-chart-data-table:not(.sky-theme-modern *){--sky-override-chart-table-color-text-default: #212327;--sky-override-chart-table-color-text-heading: #212327;--sky-override-chart-table-header-background-color: #eeeeef;--sky-override-chart-table-row-border: 1px solid #cdcfd2;--sky-override-chart-table-cell-padding: 8px 12px}.sky-chart-data-table-wrapper{overflow-x:auto}.sky-chart-data-table{border-collapse:collapse;width:100%;color:var(--sky-override-chart-table-color-text-default, var(--sky-color-text-default))}.sky-chart-data-table th{text-align:left}.sky-chart-data-table td,.sky-chart-data-table th{padding:var(--sky-override-chart-table-cell-padding, var(--sky-comp-grid-cell-space-inset-top) var(--sky-comp-grid-cell-space-inset-right) var(--sky-comp-grid-cell-space-inset-bottom) var(--sky-comp-grid-cell-space-inset-left))}.sky-chart-data-table td,.sky-chart-data-table thead th:not(:first-child){text-align:right}.sky-chart-data-table thead th{background-color:var(--sky-override-chart-table-header-background-color, var(--sky-background-color-page-default));color:var(--sky-override-chart-table-color-text-heading, var(--sky-color-text-heading))}.sky-chart-data-table thead tr,.sky-chart-data-table tbody tr:not(:last-child){border-bottom:var(--sky-override-chart-table-row-border, var(--sky-border-width-separator-row) var(--sky-border-style-separator-row) var(--sky-color-border-separator-row))}\n"], dependencies: [{ kind: "ngmodule", type: SkyChartsResourcesModule }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i1.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i1.λ2, selector: "sky-modal-content" }, { kind: "component", type: i1.λ3, selector: "sky-modal-footer" }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChartDataTableModal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChartTableModal, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyChartsResourcesModule, SkyModalModule], template: "<sky-modal [headingText]=\"context.headingText\">\n  <sky-modal-content> Chart data table, here. </sky-modal-content>\n  <sky-modal-footer>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"modal.close()\">\n      {{ 'skyux_charts.data_table_modal.close_button' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyChartsResourcesModule, SkyModalModule], selector: 'sky-chart-table-modal', template: "<sky-modal [headingText]=\"context.headingText\">\n  <sky-modal-content>\n    @if (context.table; as table) {\n      <div\n        class=\"sky-chart-data-table-wrapper\"\n        role=\"region\"\n        tabindex=\"0\"\n        [attr.aria-label]=\"\n          'skyux_charts.data_table_modal.table_region_label'\n            | skyLibResources: context.headingText\n        \"\n      >\n        <table class=\"sky-chart-data-table\">\n          <thead>\n            <tr>\n              <th scope=\"col\">\n                {{ table.categoryLabel }}\n              </th>\n              @for (series of table.series; track $index) {\n                <th scope=\"col\">\n                  {{ series.label }}\n                </th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            @for (\n              category of table.categories;\n              track $index;\n              let rowIndex = $index\n            ) {\n              <tr>\n                <th scope=\"row\">\n                  {{ category }}\n                </th>\n                @for (series of table.series; track $index) {\n                  <td>\n                    {{ series.values[rowIndex] }}\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-link sky-chart-table-modal-close\"\n      type=\"button\"\n      (click)=\"modal.close()\"\n    >\n      {{ 'skyux_charts.data_table_modal.close_button' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-chart-data-table:not(.sky-theme-modern *){--sky-override-chart-table-color-text-default: #212327;--sky-override-chart-table-color-text-heading: #212327;--sky-override-chart-table-header-background-color: #eeeeef;--sky-override-chart-table-row-border: 1px solid #cdcfd2;--sky-override-chart-table-cell-padding: 8px 12px}.sky-chart-data-table-wrapper{overflow-x:auto}.sky-chart-data-table{border-collapse:collapse;width:100%;color:var(--sky-override-chart-table-color-text-default, var(--sky-color-text-default))}.sky-chart-data-table th{text-align:left}.sky-chart-data-table td,.sky-chart-data-table th{padding:var(--sky-override-chart-table-cell-padding, var(--sky-comp-grid-cell-space-inset-top) var(--sky-comp-grid-cell-space-inset-right) var(--sky-comp-grid-cell-space-inset-bottom) var(--sky-comp-grid-cell-space-inset-left))}.sky-chart-data-table td,.sky-chart-data-table thead th:not(:first-child){text-align:right}.sky-chart-data-table thead th{background-color:var(--sky-override-chart-table-header-background-color, var(--sky-background-color-page-default));color:var(--sky-override-chart-table-color-text-heading, var(--sky-color-text-heading))}.sky-chart-data-table thead tr,.sky-chart-data-table tbody tr:not(:last-child){border-bottom:var(--sky-override-chart-table-row-border, var(--sky-border-width-separator-row) var(--sky-border-style-separator-row) var(--sky-color-border-separator-row))}\n"] }]
         }] });
 
 class SkyChartControls {
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#modalSvc = inject(SkyModalService);
+        this.#tableSvc = inject(SkyChartTableService);
         this.headingText = input.required(...(ngDevMode ? [{ debugName: "headingText" }] : []));
+        /**
+         * The plot's data table. The context menu's only action is viewing the
+         * data table, so the menu renders only while a table is available — a
+         * plot that has not published one (no data yet, or still loading for the
+         * first time) has no actions to offer.
+         */
+        this.table = this.#tableSvc.table;
     }
     #destroyRef;
     #modalSvc;
+    #tableSvc;
     openDataTableModal() {
-        const instance = this.#modalSvc.open(SkyChartDataTableModal, {
+        const instance = this.#modalSvc.open(SkyChartTableModal, {
             size: 'large',
             providers: [
                 {
-                    provide: SkyChartDataTableModalContext,
+                    provide: SkyChartTableModalContext,
                     useValue: {
                         headingText: this.headingText(),
+                        table: this.#tableSvc.table(),
                     },
                 },
             ],
@@ -81,11 +1218,11 @@ class SkyChartControls {
         this.#destroyRef.onDestroy(() => instance.close());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChartControls, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: SkyChartControls, isStandalone: true, selector: "sky-chart-controls", inputs: { headingText: { classPropertyName: "headingText", publicName: "headingText", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<sky-dropdown\n  buttonType=\"context-menu\"\n  [label]=\"\n    'skyux_charts.chart.controls.context_menu.accessible_name'\n      | skyLibResources: headingText()\n  \"\n>\n  <sky-dropdown-menu>\n    <sky-dropdown-item>\n      <button type=\"button\" (click)=\"openDataTableModal()\">\n        {{\n          'skyux_charts.chart.controls.context_menu.view_data_table'\n            | skyLibResources\n        }}\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n", dependencies: [{ kind: "ngmodule", type: SkyChartsResourcesModule }, { kind: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i1$1.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i1$1.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i1$1.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyChartControls, isStandalone: true, selector: "sky-chart-controls", inputs: { headingText: { classPropertyName: "headingText", publicName: "headingText", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (table()) {\n  <sky-dropdown\n    buttonType=\"context-menu\"\n    [label]=\"\n      'skyux_charts.chart.controls.context_menu.accessible_name'\n        | skyLibResources: headingText()\n    \"\n  >\n    <sky-dropdown-menu>\n      <sky-dropdown-item>\n        <button type=\"button\" (click)=\"openDataTableModal()\">\n          {{\n            'skyux_charts.chart.controls.context_menu.view_data_table'\n              | skyLibResources\n          }}\n        </button>\n      </sky-dropdown-item>\n    </sky-dropdown-menu>\n  </sky-dropdown>\n}\n", dependencies: [{ kind: "ngmodule", type: SkyChartsResourcesModule }, { kind: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i1$1.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i1$1.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i1$1.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChartControls, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyChartsResourcesModule, SkyDropdownModule], selector: 'sky-chart-controls', template: "<sky-dropdown\n  buttonType=\"context-menu\"\n  [label]=\"\n    'skyux_charts.chart.controls.context_menu.accessible_name'\n      | skyLibResources: headingText()\n  \"\n>\n  <sky-dropdown-menu>\n    <sky-dropdown-item>\n      <button type=\"button\" (click)=\"openDataTableModal()\">\n        {{\n          'skyux_charts.chart.controls.context_menu.view_data_table'\n            | skyLibResources\n        }}\n      </button>\n    </sky-dropdown-item>\n  </sky-dropdown-menu>\n</sky-dropdown>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyChartsResourcesModule, SkyDropdownModule], selector: 'sky-chart-controls', template: "@if (table()) {\n  <sky-dropdown\n    buttonType=\"context-menu\"\n    [label]=\"\n      'skyux_charts.chart.controls.context_menu.accessible_name'\n        | skyLibResources: headingText()\n    \"\n  >\n    <sky-dropdown-menu>\n      <sky-dropdown-item>\n        <button type=\"button\" (click)=\"openDataTableModal()\">\n          {{\n            'skyux_charts.chart.controls.context_menu.view_data_table'\n              | skyLibResources\n          }}\n        </button>\n      </sky-dropdown-item>\n    </sky-dropdown-menu>\n  </sky-dropdown>\n}\n" }]
         }], propDecorators: { headingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingText", required: true }] }] } });
 
 class SkyChartHeading {
@@ -137,17 +1274,17 @@ class SkyChartSubheading {
         this.subheadingText = input.required(...(ngDevMode ? [{ debugName: "subheadingText" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChartSubheading, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: SkyChartSubheading, isStandalone: true, selector: "sky-chart-subheading", inputs: { subheadingText: { classPropertyName: "subheadingText", publicName: "subheadingText", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `{{ subheadingText() }}`, isInline: true, styles: [":host{display:block;font-family:var(--sky-font-family-primary);font-size:var(--sky-font-size-body-m);font-weight:var(--sky-font-style-body-m);line-height:var(--sky-font-line_height-body-m);color:var(--sky-color-text-deemphasized)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: SkyChartSubheading, isStandalone: true, selector: "sky-chart-subheading", inputs: { subheadingText: { classPropertyName: "subheadingText", publicName: "subheadingText", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `{{ subheadingText() }}`, isInline: true, styles: [":host:not(.sky-theme-modern *){--sky-override-chart-font-size-body-m: 15px;--sky-override-chart-font-style-body-m: 400;--sky-override-chart-font-line_height-body-m: 1.3333}:host{display:block;font-family:var(--sky-override-chart-font-family-primary, var(--sky-font-family-primary));font-size:var(--sky-override-chart-font-size-body-m, var(--sky-font-size-body-m));font-weight:var(--sky-override-chart-font-style-body-m, var(--sky-font-style-body-m));line-height:var(--sky-override-chart-font-line_height-body-m, var(--sky-font-line_height-body-m));color:var(--sky-override-chart-color-text-deemphasized, var(--sky-color-text-deemphasized))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChartSubheading, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'sky-chart-subheading', template: `{{ subheadingText() }}`, styles: [":host{display:block;font-family:var(--sky-font-family-primary);font-size:var(--sky-font-size-body-m);font-weight:var(--sky-font-style-body-m);line-height:var(--sky-font-line_height-body-m);color:var(--sky-color-text-deemphasized)}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'sky-chart-subheading', template: `{{ subheadingText() }}`, styles: [":host:not(.sky-theme-modern *){--sky-override-chart-font-size-body-m: 15px;--sky-override-chart-font-style-body-m: 400;--sky-override-chart-font-line_height-body-m: 1.3333}:host{display:block;font-family:var(--sky-override-chart-font-family-primary, var(--sky-font-family-primary));font-size:var(--sky-override-chart-font-size-body-m, var(--sky-font-size-body-m));font-weight:var(--sky-override-chart-font-style-body-m, var(--sky-font-style-body-m));line-height:var(--sky-override-chart-font-line_height-body-m, var(--sky-font-line_height-body-m));color:var(--sky-override-chart-color-text-deemphasized, var(--sky-color-text-deemphasized))}\n"] }]
         }], propDecorators: { subheadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "subheadingText", required: true }] }] } });
 
 /**
- * @preview
- *
  * Provides a consistent heading, subheading, and layout wrapper for a chart.
+ *
+ * @preview
  */
 class SkyChart {
     constructor() {
@@ -186,33 +1323,69 @@ class SkyChart {
          */
         this.helpPopoverTitle = input(...(ngDevMode ? [undefined, { debugName: "helpPopoverTitle" }] : []));
         /**
-         * Whether to hide the chart's subheading.
+         * Whether the chart's data is being loaded. When `true`, a wait overlay
+         * covers the chart's content area, which reserves the default chart height
+         * while no plot is rendered. The heading and help button stay interactive.
+         * @default false
          */
-        this.subheadingHidden = input(false, { ...(ngDevMode ? { debugName: "subheadingHidden" } : {}), transform: booleanAttribute });
+        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
         /**
          * The text to display as the chart's subheading.
          */
         this.subheadingText = input(...(ngDevMode ? [undefined, { debugName: "subheadingText" }] : []));
+        this.#resourcesSvc = inject(SkyLibResourcesService);
+        this.#tableSvc = inject(SkyChartTableService);
+        // Resolve the plot's descriptive summary into localized text. Each plot type
+        // publishes its own resource key and arguments, so the wording can describe
+        // that type's shape.
+        this.#summaryText = toSignal(toObservable(this.#tableSvc.summary).pipe(switchMap((summary) => summary
+            ? this.#resourcesSvc.getString(summary.resourceKey, ...summary.args)
+            : of(undefined))), { initialValue: undefined });
         this.figureLabel = computed(() => {
-            const subheadingText = this.subheadingText();
-            return subheadingText
-                ? `${this.headingText()}, ${subheadingText}`
-                : this.headingText();
+            const parts = [];
+            // When the heading is hidden, name the figure with the title (and
+            // subheading) so it is not lost. When the heading is visible, it already
+            // provides that context, so the title is omitted here to avoid announcing
+            // it twice.
+            if (this.headingHidden()) {
+                const subheadingText = this.subheadingText();
+                parts.push(subheadingText
+                    ? `${this.headingText()}, ${subheadingText}`
+                    : this.headingText());
+            }
+            // The descriptive summary (chart type, shape, and that a data table is
+            // available) adds information rather than echoing the title, so it is safe
+            // to include whether or not the heading is visible.
+            const summaryText = this.#summaryText();
+            if (summaryText) {
+                parts.push(summaryText);
+            }
+            return parts.length > 0 ? parts.join('. ') : null;
         }, ...(ngDevMode ? [{ debugName: "figureLabel" }] : []));
     }
+    #resourcesSvc;
+    #tableSvc;
+    // Resolve the plot's descriptive summary into localized text. Each plot type
+    // publishes its own resource key and arguments, so the wording can describe
+    // that type's shape.
+    #summaryText;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChart, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyChart, isStandalone: true, selector: "sky-chart", inputs: { headingHidden: { classPropertyName: "headingHidden", publicName: "headingHidden", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, headingStyle: { classPropertyName: "headingStyle", publicName: "headingStyle", isSignal: true, isRequired: false, transformFunction: null }, headingText: { classPropertyName: "headingText", publicName: "headingText", isSignal: true, isRequired: true, transformFunction: null }, helpKey: { classPropertyName: "helpKey", publicName: "helpKey", isSignal: true, isRequired: false, transformFunction: null }, helpPopoverContent: { classPropertyName: "helpPopoverContent", publicName: "helpPopoverContent", isSignal: true, isRequired: false, transformFunction: null }, helpPopoverTitle: { classPropertyName: "helpPopoverTitle", publicName: "helpPopoverTitle", isSignal: true, isRequired: false, transformFunction: null }, subheadingHidden: { classPropertyName: "subheadingHidden", publicName: "subheadingHidden", isSignal: true, isRequired: false, transformFunction: null }, subheadingText: { classPropertyName: "subheadingText", publicName: "subheadingText", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "sky-chart" }, ngImport: i0, template: "<div class=\"sky-chart-header\">\n  <div>\n    @if (!headingHidden()) {\n      <sky-chart-heading\n        [headingLevel]=\"headingLevel()\"\n        [headingStyle]=\"headingStyle()\"\n        [headingText]=\"headingText()\"\n        [helpKey]=\"helpKey()\"\n        [helpPopoverContent]=\"helpPopoverContent()\"\n        [helpPopoverTitle]=\"helpPopoverTitle()\"\n      />\n    }\n    @if (!subheadingHidden() && subheadingText(); as subheadingText) {\n      <sky-chart-subheading [subheadingText]=\"subheadingText\" />\n    }\n  </div>\n  <sky-chart-controls [headingText]=\"headingText()\" />\n</div>\n<figure class=\"sky-chart-content\" [attr.aria-label]=\"figureLabel()\">\n  <ng-content />\n</figure>\n", styles: [".sky-chart{display:block}.sky-chart-header{display:flex;align-items:baseline;justify-content:space-between;column-gap:var(--sky-space-gap-text_action-m, 12px);margin-bottom:var(--sky-space-stacked-xs, 5px)}figure.sky-chart-content{margin:0}\n"], dependencies: [{ kind: "component", type: SkyChartControls, selector: "sky-chart-controls", inputs: ["headingText"] }, { kind: "component", type: SkyChartHeading, selector: "sky-chart-heading", inputs: ["headingLevel", "headingStyle", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: SkyChartSubheading, selector: "sky-chart-subheading", inputs: ["subheadingText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyChart, isStandalone: true, selector: "sky-chart", inputs: { headingHidden: { classPropertyName: "headingHidden", publicName: "headingHidden", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, headingStyle: { classPropertyName: "headingStyle", publicName: "headingStyle", isSignal: true, isRequired: false, transformFunction: null }, headingText: { classPropertyName: "headingText", publicName: "headingText", isSignal: true, isRequired: true, transformFunction: null }, helpKey: { classPropertyName: "helpKey", publicName: "helpKey", isSignal: true, isRequired: false, transformFunction: null }, helpPopoverContent: { classPropertyName: "helpPopoverContent", publicName: "helpPopoverContent", isSignal: true, isRequired: false, transformFunction: null }, helpPopoverTitle: { classPropertyName: "helpPopoverTitle", publicName: "helpPopoverTitle", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, subheadingText: { classPropertyName: "subheadingText", publicName: "subheadingText", isSignal: true, isRequired: false, transformFunction: null } }, providers: [SkyChartTableService], ngImport: i0, template: "<div class=\"sky-chart-header\">\n  <div>\n    @if (!headingHidden()) {\n      <sky-chart-heading\n        [headingLevel]=\"headingLevel()\"\n        [headingStyle]=\"headingStyle()\"\n        [headingText]=\"headingText()\"\n        [helpKey]=\"helpKey()\"\n        [helpPopoverContent]=\"helpPopoverContent()\"\n        [helpPopoverTitle]=\"helpPopoverTitle()\"\n      />\n      @if (subheadingText(); as subheadingText) {\n        <sky-chart-subheading [subheadingText]=\"subheadingText\" />\n      }\n    }\n  </div>\n  @if (!loading()) {\n    <sky-chart-controls [headingText]=\"headingText()\" />\n  }\n</div>\n<figure\n  class=\"sky-chart-content\"\n  [attr.aria-busy]=\"loading() ? 'true' : null\"\n  [attr.aria-label]=\"figureLabel()\"\n  [attr.role]=\"figureLabel() ? 'img' : null\"\n  [class.sky-chart-content-loading]=\"loading()\"\n>\n  <sky-wait [isWaiting]=\"loading()\" />\n  <ng-content />\n</figure>\n", styles: [":host:not(.sky-theme-modern *){--sky-override-chart-font-family-primary: BLKB Sans, Helvetica Neue, Arial, sans-serif;--sky-override-chart-font-size-body-s: 13px;--sky-override-chart-font-style-body-s: 400;--sky-override-chart-font-style-emphasized: 700;--sky-override-chart-font-line_height-body-s: 1.3846;--sky-override-chart-color-text-default: #212327;--sky-override-chart-color-text-deemphasized: #686c73;--sky-override-chart-color-viz-axis: #cdcfd2;--sky-override-chart-color-viz-gridline: #eeeeef;--sky-override-chart-color-viz-category-1: #06a39e;--sky-override-chart-color-viz-category-2: #6d3c96;--sky-override-chart-color-viz-category-3: #5589dd;--sky-override-chart-color-viz-category-4: #004252;--sky-override-chart-color-viz-category-5: #ce5600;--sky-override-chart-color-viz-category-6: #822325;--sky-override-chart-color-viz-category-7: #c650c1;--sky-override-chart-color-viz-category-8: #077e43;--sky-override-chart-color-background-container-base: #ffffff;--sky-override-chart-color-border-container-base: #cdcfd2;--sky-override-chart-size-chart-tick_length-measure: 12px;--sky-override-chart-space-stacked-xs: 4px;--sky-override-chart-space-stacked-s: 8px;--sky-override-chart-space-stacked-0: 0px;--sky-override-chart-space-gap-icon-s: 4px;--sky-override-chart-space-gap-text_action-m: 12px;--sky-override-chart-size-icon-xs: 16px;--sky-override-chart-border-width-container-base: 1px;--sky-override-chart-border-radius-s: 4px;--sky-override-chart-border-radius-xs: 2px;--sky-override-chart-comp-chart-tooltip-space-inset-top: 8px;--sky-override-chart-comp-chart-tooltip-space-inset-right: 12px;--sky-override-chart-comp-chart-tooltip-space-inset-bottom: 8px;--sky-override-chart-comp-chart-tooltip-space-inset-left: 12px}:host{display:block;--sky-chart-height-min: 11.25rem;--sky-chart-height-viewport: 28vh;--sky-chart-height-max: 25rem}.sky-chart-header{display:flex;align-items:baseline;justify-content:space-between;column-gap:var(--sky-override-chart-space-gap-text_action-m, var(--sky-space-gap-text_action-m));margin-bottom:var(--sky-override-chart-space-stacked-s, var(--sky-space-stacked-s))}figure.sky-chart-content{margin:0}figure.sky-chart-content-loading{position:relative;min-height:clamp(var(--sky-chart-height-min),var(--sky-chart-height-viewport),var(--sky-chart-height-max))}\n"], dependencies: [{ kind: "component", type: SkyChartControls, selector: "sky-chart-controls", inputs: ["headingText"] }, { kind: "component", type: SkyChartHeading, selector: "sky-chart-heading", inputs: ["headingLevel", "headingStyle", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: SkyChartSubheading, selector: "sky-chart-subheading", inputs: ["subheadingText"] }, { kind: "ngmodule", type: SkyChartsResourcesModule }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i1$3.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyChart, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'sky-chart',
-                    }, imports: [SkyChartControls, SkyChartHeading, SkyChartSubheading], selector: 'sky-chart', template: "<div class=\"sky-chart-header\">\n  <div>\n    @if (!headingHidden()) {\n      <sky-chart-heading\n        [headingLevel]=\"headingLevel()\"\n        [headingStyle]=\"headingStyle()\"\n        [headingText]=\"headingText()\"\n        [helpKey]=\"helpKey()\"\n        [helpPopoverContent]=\"helpPopoverContent()\"\n        [helpPopoverTitle]=\"helpPopoverTitle()\"\n      />\n    }\n    @if (!subheadingHidden() && subheadingText(); as subheadingText) {\n      <sky-chart-subheading [subheadingText]=\"subheadingText\" />\n    }\n  </div>\n  <sky-chart-controls [headingText]=\"headingText()\" />\n</div>\n<figure class=\"sky-chart-content\" [attr.aria-label]=\"figureLabel()\">\n  <ng-content />\n</figure>\n", styles: [".sky-chart{display:block}.sky-chart-header{display:flex;align-items:baseline;justify-content:space-between;column-gap:var(--sky-space-gap-text_action-m, 12px);margin-bottom:var(--sky-space-stacked-xs, 5px)}figure.sky-chart-content{margin:0}\n"] }]
-        }], propDecorators: { headingHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingHidden", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], headingStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingStyle", required: false }] }], headingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingText", required: true }] }], helpKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpKey", required: false }] }], helpPopoverContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpPopoverContent", required: false }] }], helpPopoverTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpPopoverTitle", required: false }] }], subheadingHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "subheadingHidden", required: false }] }], subheadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "subheadingText", required: false }] }] } });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        SkyChartControls,
+                        SkyChartHeading,
+                        SkyChartSubheading,
+                        SkyChartsResourcesModule,
+                        SkyWaitModule,
+                    ], providers: [SkyChartTableService], selector: 'sky-chart', template: "<div class=\"sky-chart-header\">\n  <div>\n    @if (!headingHidden()) {\n      <sky-chart-heading\n        [headingLevel]=\"headingLevel()\"\n        [headingStyle]=\"headingStyle()\"\n        [headingText]=\"headingText()\"\n        [helpKey]=\"helpKey()\"\n        [helpPopoverContent]=\"helpPopoverContent()\"\n        [helpPopoverTitle]=\"helpPopoverTitle()\"\n      />\n      @if (subheadingText(); as subheadingText) {\n        <sky-chart-subheading [subheadingText]=\"subheadingText\" />\n      }\n    }\n  </div>\n  @if (!loading()) {\n    <sky-chart-controls [headingText]=\"headingText()\" />\n  }\n</div>\n<figure\n  class=\"sky-chart-content\"\n  [attr.aria-busy]=\"loading() ? 'true' : null\"\n  [attr.aria-label]=\"figureLabel()\"\n  [attr.role]=\"figureLabel() ? 'img' : null\"\n  [class.sky-chart-content-loading]=\"loading()\"\n>\n  <sky-wait [isWaiting]=\"loading()\" />\n  <ng-content />\n</figure>\n", styles: [":host:not(.sky-theme-modern *){--sky-override-chart-font-family-primary: BLKB Sans, Helvetica Neue, Arial, sans-serif;--sky-override-chart-font-size-body-s: 13px;--sky-override-chart-font-style-body-s: 400;--sky-override-chart-font-style-emphasized: 700;--sky-override-chart-font-line_height-body-s: 1.3846;--sky-override-chart-color-text-default: #212327;--sky-override-chart-color-text-deemphasized: #686c73;--sky-override-chart-color-viz-axis: #cdcfd2;--sky-override-chart-color-viz-gridline: #eeeeef;--sky-override-chart-color-viz-category-1: #06a39e;--sky-override-chart-color-viz-category-2: #6d3c96;--sky-override-chart-color-viz-category-3: #5589dd;--sky-override-chart-color-viz-category-4: #004252;--sky-override-chart-color-viz-category-5: #ce5600;--sky-override-chart-color-viz-category-6: #822325;--sky-override-chart-color-viz-category-7: #c650c1;--sky-override-chart-color-viz-category-8: #077e43;--sky-override-chart-color-background-container-base: #ffffff;--sky-override-chart-color-border-container-base: #cdcfd2;--sky-override-chart-size-chart-tick_length-measure: 12px;--sky-override-chart-space-stacked-xs: 4px;--sky-override-chart-space-stacked-s: 8px;--sky-override-chart-space-stacked-0: 0px;--sky-override-chart-space-gap-icon-s: 4px;--sky-override-chart-space-gap-text_action-m: 12px;--sky-override-chart-size-icon-xs: 16px;--sky-override-chart-border-width-container-base: 1px;--sky-override-chart-border-radius-s: 4px;--sky-override-chart-border-radius-xs: 2px;--sky-override-chart-comp-chart-tooltip-space-inset-top: 8px;--sky-override-chart-comp-chart-tooltip-space-inset-right: 12px;--sky-override-chart-comp-chart-tooltip-space-inset-bottom: 8px;--sky-override-chart-comp-chart-tooltip-space-inset-left: 12px}:host{display:block;--sky-chart-height-min: 11.25rem;--sky-chart-height-viewport: 28vh;--sky-chart-height-max: 25rem}.sky-chart-header{display:flex;align-items:baseline;justify-content:space-between;column-gap:var(--sky-override-chart-space-gap-text_action-m, var(--sky-space-gap-text_action-m));margin-bottom:var(--sky-override-chart-space-stacked-s, var(--sky-space-stacked-s))}figure.sky-chart-content{margin:0}figure.sky-chart-content-loading{position:relative;min-height:clamp(var(--sky-chart-height-min),var(--sky-chart-height-viewport),var(--sky-chart-height-max))}\n"] }]
+        }], propDecorators: { headingHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingHidden", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], headingStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingStyle", required: false }] }], headingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingText", required: true }] }], helpKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpKey", required: false }] }], helpPopoverContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpPopoverContent", required: false }] }], helpPopoverTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpPopoverTitle", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], subheadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "subheadingText", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SkyChart };
+export { SkyChart, SkyChartAxisCategory, SkyChartAxisValue, SkyChartBar, SkyChartBarSeries };
 //# sourceMappingURL=skyux-charts.mjs.map