@nanahoshi/mona-ui 0.15.3 → 0.16.0

package/chart/README.md

@@ -167,12 +167,13 @@ The benchmark is intentionally non-gating and emits one compact JSON record for
     <mona-chart-y-axis [nice]="true" />
 
     <mona-bar-series field="revenue" name="Revenue" [borderRadius]="4" />
-    <mona-line-series field="target" name="Target" curve="monotone-x" [showPoints]="true" />
-    <mona-area-series field="forecast" name="Forecast" fillMode="gradient" />
+    <mona-line-series field="target" name="Target" curve="monotone-x" lineStyle="dashed" [showPoints]="true" />
+    <mona-area-series field="forecast" name="Forecast" fillMode="gradient" lineStyle="dotted" />
 
     <mona-chart-legend position="bottom" [interactive]="true" />
     <mona-chart-tooltip [shared]="true" />
 </mona-chart>
+
 ```
 
 ### Stacked Bar Chart & 100% Stacked Bar Chart
@@ -348,26 +349,50 @@ Renders a Cartesian floating range bar series plotting discrete min-max interval
 | `valueFormatter` | `ChartValueFormatter` | `undefined`   | Custom formatter callback for formatting range bounds in tooltips and live region.      |
 | `visible`        | `model(boolean)`      | `true`        | Two-way bindable series visibility.                                                     |
 
+### `<mona-line-series>`
+
+Renders a continuous Cartesian line series connecting data points with configurable curve interpolation and stroke pattern.
+
+| Input / Output   | Type                     | Default      | Description                                                                                          |
+| :--------------- | :----------------------- | :----------- | :--------------------------------------------------------------------------------------------------- |
+| `field`          | `ChartField`             | `""`         | Property key or accessor extracting numeric Y value.                                                 |
+| `xField`         | `ChartField | undefined` | `undefined`  | Property key or accessor extracting X-axis coordinate (overrides chart-level `xField`).              |
+| `keyField`       | `ChartField | undefined` | `undefined`  | Unique identifier field for stable mark tracking across animation transitions.                       |
+| `name`           | `string`                 | `""`         | Series name for tooltips, legend, and accessibility.                                                 |
+| `lineStyle`      | `ChartLineStyle`         | `"solid"`    | Stroke pattern used to render the series line (`"solid"`, `"dashed"`, or `"dotted"`).               |
+| `curve`          | `ChartCurve`             | `"linear"`   | Curve interpolation algorithm (`"linear"`, `"monotone-x"`, `"natural"`, `"step"`, `"step-after"`).   |
+| `connectNulls`   | `boolean`                | `false`      | Whether to interpolate across null/missing data points without gaps.                                 |
+| `showPoints`     | `boolean`                | `false`      | Whether to render point markers at data coordinates.                                                 |
+| `pointRadius`    | `number | undefined`     | `undefined`  | Radius in pixels for point markers. Defaults to `--mona-chart-point-radius` (3px).                    |
+| `strokeWidth`    | `number | undefined`     | `undefined`  | Stroke width in pixels for the series line. Defaults to 2px.                                         |
+| `color`          | `string`                 | `""`         | Explicit stroke color override for the series line. Defaults to palette token.                       |
+| `visible`        | `model(boolean)`         | `true`       | Two-way bindable series visibility.                                                                  |
+
 ### `<mona-area-series>`
 
 Renders a continuous Cartesian area series supporting gradient fades, solid fills, cumulative stacking, and 100% normalized area bands.
 
-| Input / Output   | Type                  | Default      | Description                                                                                        |
-| :--------------- | :-------------------- | :----------- | :------------------------------------------------------------------------------------------------- |
-| `field`          | `ChartField`          | `"value"`    | Property key or accessor extracting numeric Y value.                                               |
-| `xField`         | `ChartField`          | `undefined`  | Property key or accessor extracting X-axis coordinate (overrides chart-level `xField`).            |
-| `keyField`       | `ChartField`          | `undefined`  | Unique identifier field for stable mark tracking across animation transitions.                     |
-| `name`           | `string`              | `"Area"`     | Series name for tooltips, legend, and accessibility.                                               |
-| `stack`          | `string`              | `undefined`  | Stack group name. Series sharing the same stack identifier are stacked into cumulative bands.      |
-| `stackMode`      | `ChartStackMode`      | `"normal"`   | Stacking calculation mode: `"normal"` (raw cumulative sum) or `"percent"` (normalized to 100%).    |
-| `fillMode`       | `ChartAreaFillMode`   | `"gradient"` | Area fill style: `"gradient"`, `"solid"`, or `"none"`.                                             |
-| `fillOpacity`    | `number`              | `0.2`        | Area fill opacity between 0.0 and 1.0.                                                             |
-| `curve`          | `ChartCurve`          | `"linear"`   | Curve interpolation algorithm (`"linear"`, `"monotone-x"`, `"natural"`, `"step"`, `"step-after"`). |
-| `connectNulls`   | `boolean`             | `false`      | Whether to interpolate across null/missing data points.                                            |
-| `showPoints`     | `boolean`             | `false`      | Whether to render point markers at data coordinates.                                               |
-| `color`          | `string`              | `undefined`  | Area line and fill color. Defaults to palette token.                                               |
-| `valueFormatter` | `ChartValueFormatter` | `undefined`  | Custom formatter callback for area raw values and stack totals in tooltips and live region.        |
-| `visible`        | `model(boolean)`      | `true`       | Two-way bindable series visibility.                                                                |
+| Input / Output   | Type                     | Default      | Description                                                                                          |
+| :--------------- | :----------------------- | :----------- | :--------------------------------------------------------------------------------------------------- |
+| `field`          | `ChartField`             | `""`         | Property key or accessor extracting numeric Y value.                                                 |
+| `xField`         | `ChartField | undefined` | `undefined`  | Property key or accessor extracting X-axis coordinate (overrides chart-level `xField`).              |
+| `keyField`       | `ChartField | undefined` | `undefined`  | Unique identifier field for stable mark tracking across animation transitions.                       |
+| `name`           | `string`                 | `""`         | Series name for tooltips, legend, and accessibility.                                                 |
+| `stack`          | `string | undefined`     | `undefined`  | Stack group name. Series sharing the same stack identifier are stacked into cumulative bands.        |
+| `stackMode`      | `ChartStackMode`         | `"normal"`   | Stacking calculation mode: `"normal"` (raw cumulative sum) or `"percent"` (normalized to 100%).      |
+| `fillMode`       | `ChartAreaFillMode`      | `"gradient"` | Area fill style: `"gradient"` fading to zero baseline, or uniform `"solid"`.                        |
+| `lineStyle`      | `ChartLineStyle`         | `"solid"`    | Stroke pattern used for the area's boundary line (`"solid"`, `"dashed"`, or `"dotted"`). Fill is unaffected. |
+| `fillOpacity`    | `number | undefined`     | `undefined`  | Maximum opacity applied to the area fill. Defaults to 0.18.                                          |
+| `curve`          | `ChartCurve`             | `"linear"`   | Curve interpolation algorithm (`"linear"`, `"monotone-x"`, `"natural"`, `"step"`, `"step-after"`).   |
+| `connectNulls`   | `boolean`                | `false`      | Whether to interpolate across null/missing data points without gaps.                                 |
+| `showPoints`     | `boolean`                | `false`      | Whether to render point markers at data coordinates.                                                 |
+| `pointRadius`    | `number | undefined`     | `undefined`  | Radius in pixels for point markers. Defaults to `--mona-chart-point-radius` (4px).                    |
+| `strokeWidth`    | `number | undefined`     | `undefined`  | Stroke width in pixels for the area boundary line. Defaults to 2px.                                  |
+| `color`          | `string`                 | `""`         | Explicit stroke and fill color override for the area series. Defaults to palette token.              |
+| `valueFormatter` | `ChartValueFormatter | undefined` | `undefined` | Custom formatter callback for area raw values and stack totals in tooltips and live region.       |
+| `visible`        | `model(boolean)`         | `true`       | Two-way bindable series visibility.                                                                  |
+
+
 
 ### `<mona-range-area-series>`
 

package/fesm2022/nanahoshi-mona-ui-chart.mjs

@@ -20743,6 +20743,7 @@ class ChartStyleResolver {
         const explicitStrokeWidth = "strokeWidth" in series ? series.strokeWidth?.() : undefined;
         const explicitPointRadius = "pointRadius" in series ? series.pointRadius?.() : undefined;
         const explicitFillOpacity = "fillOpacity" in series ? series.fillOpacity?.() : undefined;
+        const explicitLineStyle = "lineStyle" in series ? series.lineStyle?.() : undefined;
         let elementColor = "";
         let cssLineWidth;
         let cssPointRadius;
@@ -20807,11 +20808,13 @@ class ChartStyleResolver {
             ? Math.max(0, Math.min(1, explicitFillOpacity))
             : (cssAreaFillOpacity ?? defaultFillOpacity);
         const resolvedAreaFillColor = cssAreaFillColor ? this.resolveCssVariable(cssAreaFillColor) : resolvedColor;
+        const lineStyle = explicitLineStyle ?? "solid";
         return {
             areaFillColor: resolvedAreaFillColor,
             areaFillOpacity: resolvedFillOpacity,
             color: resolvedColor,
             fillOpacity: resolvedFillOpacity,
+            lineStyle,
             lineWidth: resolvedLineWidth,
             opacity: 1,
             pointRadius: resolvedPointRadius
@@ -36256,6 +36259,17 @@ function drawPointMarker(context, x, y, radius, fillColor, strokeColor, strokeWi
         context.stroke();
     }
 }
+function resolveCanvasStrokeDashArray(lineStyle) {
+    switch (lineStyle) {
+        case "dashed":
+            return [4, 4];
+        case "dotted":
+            return [2, 2];
+        case "solid":
+        default:
+            return [];
+    }
+}
 
 const MIXED_BASELINE_OPACITY_RATIO = 0.25;
 function withAlpha(color, alpha) {
@@ -36435,7 +36449,9 @@ class AreaSeriesRenderer {
         lineGenerator(validPoints);
         context.lineWidth = style.lineWidth;
         context.strokeStyle = style.color;
+        context.setLineDash([...resolveCanvasStrokeDashArray(style.lineStyle)]);
         context.stroke();
+        context.setLineDash([]);
         // 3. Draw Point Markers
         if (showPoints) {
             for (const p of validPoints) {
@@ -36547,7 +36563,9 @@ class LineSeriesRenderer {
         lineGenerator(validPoints);
         context.lineWidth = style.lineWidth;
         context.strokeStyle = style.color;
+        context.setLineDash([...resolveCanvasStrokeDashArray(style.lineStyle)]);
         context.stroke();
+        context.setLineDash([]);
         if (showPoints) {
             for (const p of validPoints) {
                 if (p.defined) {
@@ -40715,6 +40733,7 @@ class SvgAreaSeriesRenderer {
         setSvgAttribute(this.#strokePathElement, "fill", "none");
         setSvgAttribute(this.#strokePathElement, "stroke", style.color);
         setSvgAttribute(this.#strokePathElement, "stroke-width", style.lineWidth);
+        setSvgAttribute(this.#strokePathElement, "stroke-dasharray", resolveStrokeDashArray(style.lineStyle));
         setSvgAttribute(this.#strokePathElement, "opacity", seriesOpacity);
         // 3. Markers
         if (showPoints) {
@@ -40919,6 +40938,7 @@ class SvgLineSeriesRenderer {
         setSvgAttribute(this.#pathElement, "fill", "none");
         setSvgAttribute(this.#pathElement, "stroke", style.color);
         setSvgAttribute(this.#pathElement, "stroke-width", style.lineWidth);
+        setSvgAttribute(this.#pathElement, "stroke-dasharray", resolveStrokeDashArray(style.lineStyle));
         setSvgAttribute(this.#pathElement, "opacity", seriesOpacity);
         if (showPoints) {
             if (!this.#markersGroup) {
@@ -57709,6 +57729,12 @@ class LineSeriesComponent {
          */
         this.keyField = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "keyField" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Stroke pattern used to render the series line (`"solid"`, `"dashed"`, or `"dotted"`).
+         * @default "solid"
+         */
+        this.lineStyle = input("solid", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lineStyle" }] : /* istanbul ignore next */ []));
         /**
          * @description Name of the series displayed in legends and tooltips.
          * @default ""
@@ -57800,6 +57826,7 @@ class LineSeriesComponent {
         });
         effect(() => {
             this.color();
+            this.lineStyle();
             this.userClass();
             if (this.#registered) {
                 this.#chartContext?.invalidate(4 /* ChartInvalidationReason.Style */);
@@ -57830,6 +57857,7 @@ class LineSeriesComponent {
             field: this.field,
             id: this.#id,
             keyField: this.keyField,
+            lineStyle: this.lineStyle,
             name: this.name,
             pointRadius: this.pointRadius,
             seriesKey: this.seriesKey,
@@ -57850,7 +57878,7 @@ class LineSeriesComponent {
         this.#destroyRef.onDestroy(unregister);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LineSeriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: LineSeriesComponent, isStandalone: true, selector: "mona-line-series", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, connectNulls: { classPropertyName: "connectNulls", publicName: "connectNulls", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, dataLabels: { classPropertyName: "dataLabels", publicName: "dataLabels", isSignal: true, isRequired: false, transformFunction: null }, downsampling: { classPropertyName: "downsampling", publicName: "downsampling", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, keyField: { classPropertyName: "keyField", publicName: "keyField", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, pointRadius: { classPropertyName: "pointRadius", publicName: "pointRadius", isSignal: true, isRequired: false, transformFunction: null }, seriesKey: { classPropertyName: "seriesKey", publicName: "seriesKey", isSignal: true, isRequired: false, transformFunction: null }, showPoints: { classPropertyName: "showPoints", publicName: "showPoints", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, xAxisId: { classPropertyName: "xAxisId", publicName: "xAxisId", isSignal: true, isRequired: false, transformFunction: null }, xField: { classPropertyName: "xField", publicName: "xField", isSignal: true, isRequired: false, transformFunction: null }, yAxisId: { classPropertyName: "yAxisId", publicName: "yAxisId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange" }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "userClass()" }, styleAttribute: "display: none !important;" }, queries: [{ propertyName: "dataLabelTemplate", first: true, predicate: ChartDataLabelTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "", isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: LineSeriesComponent, isStandalone: true, selector: "mona-line-series", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, connectNulls: { classPropertyName: "connectNulls", publicName: "connectNulls", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, dataLabels: { classPropertyName: "dataLabels", publicName: "dataLabels", isSignal: true, isRequired: false, transformFunction: null }, downsampling: { classPropertyName: "downsampling", publicName: "downsampling", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, keyField: { classPropertyName: "keyField", publicName: "keyField", isSignal: true, isRequired: false, transformFunction: null }, lineStyle: { classPropertyName: "lineStyle", publicName: "lineStyle", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, pointRadius: { classPropertyName: "pointRadius", publicName: "pointRadius", isSignal: true, isRequired: false, transformFunction: null }, seriesKey: { classPropertyName: "seriesKey", publicName: "seriesKey", isSignal: true, isRequired: false, transformFunction: null }, showPoints: { classPropertyName: "showPoints", publicName: "showPoints", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, xAxisId: { classPropertyName: "xAxisId", publicName: "xAxisId", isSignal: true, isRequired: false, transformFunction: null }, xField: { classPropertyName: "xField", publicName: "xField", isSignal: true, isRequired: false, transformFunction: null }, yAxisId: { classPropertyName: "yAxisId", publicName: "yAxisId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange" }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "userClass()" }, styleAttribute: "display: none !important;" }, queries: [{ propertyName: "dataLabelTemplate", first: true, predicate: ChartDataLabelTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "", isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LineSeriesComponent, decorators: [{
             type: Component,
@@ -57863,7 +57891,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         style: "display: none !important;"
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], connectNulls: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectNulls", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], dataLabelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ChartDataLabelTemplateDirective), { isSignal: true }] }], dataLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataLabels", required: false }] }], downsampling: [{ type: i0.Input, args: [{ isSignal: true, alias: "downsampling", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], keyField: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyField", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], pointRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "pointRadius", required: false }] }], seriesKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "seriesKey", required: false }] }], showPoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPoints", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], xAxisId: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxisId", required: false }] }], xField: [{ type: i0.Input, args: [{ isSignal: true, alias: "xField", required: false }] }], yAxisId: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisId", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], connectNulls: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectNulls", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], dataLabelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ChartDataLabelTemplateDirective), { isSignal: true }] }], dataLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataLabels", required: false }] }], downsampling: [{ type: i0.Input, args: [{ isSignal: true, alias: "downsampling", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], keyField: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyField", required: false }] }], lineStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineStyle", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], pointRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "pointRadius", required: false }] }], seriesKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "seriesKey", required: false }] }], showPoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPoints", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], xAxisId: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxisId", required: false }] }], xField: [{ type: i0.Input, args: [{ isSignal: true, alias: "xField", required: false }] }], yAxisId: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisId", required: false }] }] } });
 
 let nextSeriesId$8 = 0;
 class AreaSeriesComponent {
@@ -57940,6 +57968,12 @@ class AreaSeriesComponent {
          */
         this.keyField = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "keyField" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Stroke pattern used for the area's boundary line (`"solid"`, `"dashed"`, or `"dotted"`).
+         * @default "solid"
+         */
+        this.lineStyle = input("solid", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lineStyle" }] : /* istanbul ignore next */ []));
         /**
          * @description Name of the series displayed in legends and tooltips.
          * @default ""
@@ -58054,6 +58088,7 @@ class AreaSeriesComponent {
         effect(() => {
             this.color();
             this.fillMode();
+            this.lineStyle();
             this.userClass();
             if (this.#registered) {
                 this.#chartContext?.invalidate(4 /* ChartInvalidationReason.Style */);
@@ -58086,6 +58121,7 @@ class AreaSeriesComponent {
             fillOpacity: this.fillOpacity,
             id: this.#id,
             keyField: this.keyField,
+            lineStyle: this.lineStyle,
             name: this.name,
             pointRadius: this.pointRadius,
             seriesKey: this.seriesKey,
@@ -58109,7 +58145,7 @@ class AreaSeriesComponent {
         this.#destroyRef.onDestroy(unregister);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AreaSeriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: AreaSeriesComponent, isStandalone: true, selector: "mona-area-series", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, connectNulls: { classPropertyName: "connectNulls", publicName: "connectNulls", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, dataLabels: { classPropertyName: "dataLabels", publicName: "dataLabels", isSignal: true, isRequired: false, transformFunction: null }, downsampling: { classPropertyName: "downsampling", publicName: "downsampling", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, fillMode: { classPropertyName: "fillMode", publicName: "fillMode", isSignal: true, isRequired: false, transformFunction: null }, fillOpacity: { classPropertyName: "fillOpacity", publicName: "fillOpacity", isSignal: true, isRequired: false, transformFunction: null }, keyField: { classPropertyName: "keyField", publicName: "keyField", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, pointRadius: { classPropertyName: "pointRadius", publicName: "pointRadius", isSignal: true, isRequired: false, transformFunction: null }, seriesKey: { classPropertyName: "seriesKey", publicName: "seriesKey", isSignal: true, isRequired: false, transformFunction: null }, showPoints: { classPropertyName: "showPoints", publicName: "showPoints", isSignal: true, isRequired: false, transformFunction: null }, stack: { classPropertyName: "stack", publicName: "stack", isSignal: true, isRequired: false, transformFunction: null }, stackMode: { classPropertyName: "stackMode", publicName: "stackMode", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, xAxisId: { classPropertyName: "xAxisId", publicName: "xAxisId", isSignal: true, isRequired: false, transformFunction: null }, xField: { classPropertyName: "xField", publicName: "xField", isSignal: true, isRequired: false, transformFunction: null }, yAxisId: { classPropertyName: "yAxisId", publicName: "yAxisId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange" }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "userClass()" }, styleAttribute: "display: none !important;" }, queries: [{ propertyName: "dataLabelTemplate", first: true, predicate: ChartDataLabelTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "", isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: AreaSeriesComponent, isStandalone: true, selector: "mona-area-series", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, connectNulls: { classPropertyName: "connectNulls", publicName: "connectNulls", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, dataLabels: { classPropertyName: "dataLabels", publicName: "dataLabels", isSignal: true, isRequired: false, transformFunction: null }, downsampling: { classPropertyName: "downsampling", publicName: "downsampling", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, fillMode: { classPropertyName: "fillMode", publicName: "fillMode", isSignal: true, isRequired: false, transformFunction: null }, fillOpacity: { classPropertyName: "fillOpacity", publicName: "fillOpacity", isSignal: true, isRequired: false, transformFunction: null }, keyField: { classPropertyName: "keyField", publicName: "keyField", isSignal: true, isRequired: false, transformFunction: null }, lineStyle: { classPropertyName: "lineStyle", publicName: "lineStyle", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, pointRadius: { classPropertyName: "pointRadius", publicName: "pointRadius", isSignal: true, isRequired: false, transformFunction: null }, seriesKey: { classPropertyName: "seriesKey", publicName: "seriesKey", isSignal: true, isRequired: false, transformFunction: null }, showPoints: { classPropertyName: "showPoints", publicName: "showPoints", isSignal: true, isRequired: false, transformFunction: null }, stack: { classPropertyName: "stack", publicName: "stack", isSignal: true, isRequired: false, transformFunction: null }, stackMode: { classPropertyName: "stackMode", publicName: "stackMode", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, xAxisId: { classPropertyName: "xAxisId", publicName: "xAxisId", isSignal: true, isRequired: false, transformFunction: null }, xField: { classPropertyName: "xField", publicName: "xField", isSignal: true, isRequired: false, transformFunction: null }, yAxisId: { classPropertyName: "yAxisId", publicName: "yAxisId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange" }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "userClass()" }, styleAttribute: "display: none !important;" }, queries: [{ propertyName: "dataLabelTemplate", first: true, predicate: ChartDataLabelTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "", isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AreaSeriesComponent, decorators: [{
             type: Component,
@@ -58122,7 +58158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         style: "display: none !important;"
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], connectNulls: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectNulls", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], dataLabelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ChartDataLabelTemplateDirective), { isSignal: true }] }], dataLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataLabels", required: false }] }], downsampling: [{ type: i0.Input, args: [{ isSignal: true, alias: "downsampling", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], fillMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillMode", required: false }] }], fillOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillOpacity", required: false }] }], keyField: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyField", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], pointRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "pointRadius", required: false }] }], seriesKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "seriesKey", required: false }] }], showPoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPoints", required: false }] }], stack: [{ type: i0.Input, args: [{ isSignal: true, alias: "stack", required: false }] }], stackMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackMode", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], valueFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormatter", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], xAxisId: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxisId", required: false }] }], xField: [{ type: i0.Input, args: [{ isSignal: true, alias: "xField", required: false }] }], yAxisId: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisId", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], connectNulls: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectNulls", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], dataLabelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ChartDataLabelTemplateDirective), { isSignal: true }] }], dataLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataLabels", required: false }] }], downsampling: [{ type: i0.Input, args: [{ isSignal: true, alias: "downsampling", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], fillMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillMode", required: false }] }], fillOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillOpacity", required: false }] }], keyField: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyField", required: false }] }], lineStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineStyle", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], pointRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "pointRadius", required: false }] }], seriesKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "seriesKey", required: false }] }], showPoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPoints", required: false }] }], stack: [{ type: i0.Input, args: [{ isSignal: true, alias: "stack", required: false }] }], stackMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "stackMode", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], valueFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormatter", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], xAxisId: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxisId", required: false }] }], xField: [{ type: i0.Input, args: [{ isSignal: true, alias: "xField", required: false }] }], yAxisId: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisId", required: false }] }] } });
 
 let nextSeriesId$7 = 0;
 class BarSeriesComponent {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.15.3",
+  "version": "0.16.0",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {

package/types/nanahoshi-mona-ui-chart.d.ts

@@ -459,6 +459,7 @@ declare class ChartCrosshairLabelTemplateDirective {
 
 type ChartAreaFillMode = "gradient" | "solid";
 type ChartCurve = "linear" | "monotone-x" | "natural" | "step" | "step-after";
+type ChartLineStyle = "solid" | "dashed" | "dotted";
 type ChartSeriesType = "area" | "bar" | "bubble" | "candlestick" | "donut" | "funnel" | "gauge" | "heatmap" | "line" | "ohlc" | "pie" | "polar" | "radar" | "radialBar" | "rangeArea" | "rangeBar" | "rose" | "scatter" | "treemap" | "waterfall";
 type ChartSeriesFamily = "cartesian" | "funnel" | "heatmap" | "hierarchy" | "polar" | "radar" | "radialArc" | "sector" | "waterfall";
 declare function getChartSeriesFamily(type: ChartSeriesType): ChartSeriesFamily;
@@ -1588,6 +1589,7 @@ interface ChartSeriesStyle {
     areaFillOpacity: number;
     color: string;
     fillOpacity: number;
+    lineStyle?: ChartLineStyle;
     lineWidth: number;
     opacity: number;
     pointRadius: number;
@@ -3268,6 +3270,7 @@ interface ChartLineSeriesRegistration extends ChartCartesianScalarSeriesRegistra
     connectNulls?: Signal<boolean>;
     curve?: Signal<ChartCurve>;
     downsampling?: Signal<ChartDownsamplingInput | undefined>;
+    lineStyle?: Signal<ChartLineStyle>;
     pointRadius?: Signal<number | undefined>;
     showPoints?: Signal<boolean>;
     strokeWidth?: Signal<number | undefined>;
@@ -3279,6 +3282,7 @@ interface ChartAreaSeriesRegistration extends ChartCartesianScalarSeriesRegistra
     downsampling?: Signal<ChartDownsamplingInput | undefined>;
     fillMode?: Signal<ChartAreaFillMode>;
     fillOpacity?: Signal<number | undefined>;
+    lineStyle?: Signal<ChartLineStyle>;
     pointRadius?: Signal<number | undefined>;
     showPoints?: Signal<boolean>;
     stack: Signal<string | undefined>;
@@ -4902,6 +4906,11 @@ declare class LineSeriesComponent implements OnInit {
      * @default undefined
      */
     readonly keyField: _angular_core.InputSignal<ChartField | undefined>;
+    /**
+     * @description Stroke pattern used to render the series line (`"solid"`, `"dashed"`, or `"dotted"`).
+     * @default "solid"
+     */
+    readonly lineStyle: _angular_core.InputSignal<ChartLineStyle>;
     /**
      * @description Name of the series displayed in legends and tooltips.
      * @default ""
@@ -4955,7 +4964,7 @@ declare class LineSeriesComponent implements OnInit {
     constructor();
     ngOnInit(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LineSeriesComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LineSeriesComponent, "mona-line-series", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "connectNulls": { "alias": "connectNulls"; "required": false; "isSignal": true; }; "curve": { "alias": "curve"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "dataLabels": { "alias": "dataLabels"; "required": false; "isSignal": true; }; "downsampling": { "alias": "downsampling"; "required": false; "isSignal": true; }; "field": { "alias": "field"; "required": false; "isSignal": true; }; "keyField": { "alias": "keyField"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "pointRadius": { "alias": "pointRadius"; "required": false; "isSignal": true; }; "seriesKey": { "alias": "seriesKey"; "required": false; "isSignal": true; }; "showPoints": { "alias": "showPoints"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "xAxisId": { "alias": "xAxisId"; "required": false; "isSignal": true; }; "xField": { "alias": "xField"; "required": false; "isSignal": true; }; "yAxisId": { "alias": "yAxisId"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; }, ["dataLabelTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LineSeriesComponent, "mona-line-series", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "connectNulls": { "alias": "connectNulls"; "required": false; "isSignal": true; }; "curve": { "alias": "curve"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "dataLabels": { "alias": "dataLabels"; "required": false; "isSignal": true; }; "downsampling": { "alias": "downsampling"; "required": false; "isSignal": true; }; "field": { "alias": "field"; "required": false; "isSignal": true; }; "keyField": { "alias": "keyField"; "required": false; "isSignal": true; }; "lineStyle": { "alias": "lineStyle"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "pointRadius": { "alias": "pointRadius"; "required": false; "isSignal": true; }; "seriesKey": { "alias": "seriesKey"; "required": false; "isSignal": true; }; "showPoints": { "alias": "showPoints"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "xAxisId": { "alias": "xAxisId"; "required": false; "isSignal": true; }; "xField": { "alias": "xField"; "required": false; "isSignal": true; }; "yAxisId": { "alias": "yAxisId"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; }, ["dataLabelTemplate"], never, true, never>;
 }
 
 declare class AreaSeriesComponent implements OnInit {
@@ -5011,6 +5020,11 @@ declare class AreaSeriesComponent implements OnInit {
      * @default undefined
      */
     readonly keyField: _angular_core.InputSignal<ChartField | undefined>;
+    /**
+     * @description Stroke pattern used for the area's boundary line (`"solid"`, `"dashed"`, or `"dotted"`).
+     * @default "solid"
+     */
+    readonly lineStyle: _angular_core.InputSignal<ChartLineStyle>;
     /**
      * @description Name of the series displayed in legends and tooltips.
      * @default ""
@@ -5079,7 +5093,7 @@ declare class AreaSeriesComponent implements OnInit {
     constructor();
     ngOnInit(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AreaSeriesComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AreaSeriesComponent, "mona-area-series", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "connectNulls": { "alias": "connectNulls"; "required": false; "isSignal": true; }; "curve": { "alias": "curve"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "dataLabels": { "alias": "dataLabels"; "required": false; "isSignal": true; }; "downsampling": { "alias": "downsampling"; "required": false; "isSignal": true; }; "field": { "alias": "field"; "required": false; "isSignal": true; }; "fillMode": { "alias": "fillMode"; "required": false; "isSignal": true; }; "fillOpacity": { "alias": "fillOpacity"; "required": false; "isSignal": true; }; "keyField": { "alias": "keyField"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "pointRadius": { "alias": "pointRadius"; "required": false; "isSignal": true; }; "seriesKey": { "alias": "seriesKey"; "required": false; "isSignal": true; }; "showPoints": { "alias": "showPoints"; "required": false; "isSignal": true; }; "stack": { "alias": "stack"; "required": false; "isSignal": true; }; "stackMode": { "alias": "stackMode"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "valueFormatter": { "alias": "valueFormatter"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "xAxisId": { "alias": "xAxisId"; "required": false; "isSignal": true; }; "xField": { "alias": "xField"; "required": false; "isSignal": true; }; "yAxisId": { "alias": "yAxisId"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; }, ["dataLabelTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AreaSeriesComponent, "mona-area-series", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "connectNulls": { "alias": "connectNulls"; "required": false; "isSignal": true; }; "curve": { "alias": "curve"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "dataLabels": { "alias": "dataLabels"; "required": false; "isSignal": true; }; "downsampling": { "alias": "downsampling"; "required": false; "isSignal": true; }; "field": { "alias": "field"; "required": false; "isSignal": true; }; "fillMode": { "alias": "fillMode"; "required": false; "isSignal": true; }; "fillOpacity": { "alias": "fillOpacity"; "required": false; "isSignal": true; }; "keyField": { "alias": "keyField"; "required": false; "isSignal": true; }; "lineStyle": { "alias": "lineStyle"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "pointRadius": { "alias": "pointRadius"; "required": false; "isSignal": true; }; "seriesKey": { "alias": "seriesKey"; "required": false; "isSignal": true; }; "showPoints": { "alias": "showPoints"; "required": false; "isSignal": true; }; "stack": { "alias": "stack"; "required": false; "isSignal": true; }; "stackMode": { "alias": "stackMode"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "valueFormatter": { "alias": "valueFormatter"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "xAxisId": { "alias": "xAxisId"; "required": false; "isSignal": true; }; "xField": { "alias": "xField"; "required": false; "isSignal": true; }; "yAxisId": { "alias": "yAxisId"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; }, ["dataLabelTemplate"], never, true, never>;
 }
 
 declare class BarSeriesComponent implements OnInit {
@@ -7812,4 +7826,4 @@ declare class ChartBrushComponent implements OnInit {
 }
 
 export { AreaSeriesComponent, BarSeriesComponent, BubbleSeriesComponent, CandlestickSeriesComponent, ChartAngularAxisComponent, ChartAnnotationComponent, ChartAnnotationLabelTemplateDirective, ChartAxisLabelTemplateDirective, ChartBrushComponent, ChartCenterTemplateDirective, ChartComponent, ChartCrosshairComponent, ChartCrosshairLabelTemplateDirective, ChartDataLabelTemplateDirective, ChartExportError, ChartFunnelLabelTemplateDirective, ChartGaugeCenterTemplateDirective, ChartLegendComponent, ChartLegendItemTemplateDirective, ChartNoDataTemplateDirective, ChartRadialAxisComponent, ChartReferenceBandComponent, ChartReferenceLabelTemplateDirective, ChartReferenceLineComponent, ChartSelectionComponent, ChartSliceLabelTemplateDirective, ChartSubtitleTemplateDirective, ChartTitleTemplateDirective, ChartTooltipComponent, ChartTooltipTemplateDirective, ChartTreemapLabelTemplateDirective, ChartWaterfallLabelTemplateDirective, ChartXAxisComponent, ChartYAxisComponent, DonutSeriesComponent, FunnelSeriesComponent, GaugeSeriesComponent, HeatmapSeriesComponent, LineSeriesComponent, OhlcSeriesComponent, PieSeriesComponent, PolarSeriesComponent, RadarSeriesComponent, RadialBarSeriesComponent, RangeAreaSeriesComponent, RangeBarSeriesComponent, RoseSeriesComponent, ScatterSeriesComponent, TreemapSeriesComponent, WaterfallSeriesComponent, getChartSeriesFamily, isCartesianCoordinateFamily, isHierarchicalCoordinateFamily, isPolarCoordinateFamily };
-export type { ChartAnimationEasing, ChartAnimationInput, ChartAnimationOptions, ChartAnnotationAxisValue, ChartAnnotationLabelPlacement, ChartAnnotationLabelTemplateContext, ChartAnnotationMarker, ChartAreaFillMode, ChartAxisFormatter, ChartAxisLabelRotation, ChartAxisLabelTemplateContext, ChartAxisPosition, ChartAxisTick, ChartBarOrientation, ChartBrushActivation, ChartBrushAxisRange, ChartBrushCancelReason, ChartBrushCategoryRange, ChartBrushChangeEvent, ChartBrushContinuousRange, ChartBrushHitPolicy, ChartBrushLineStyle, ChartBrushMode, ChartBrushPhase, ChartBrushSelectionBehavior, ChartCategoryViewportWindow, ChartCenterTemplateContext, ChartColorLegendScale, ChartColorLegendStop, ChartColorLegendTick, ChartContinuousViewportWindow, ChartCoordinateSystem, ChartCrosshairAxisLabelContext, ChartCrosshairLineStyle, ChartCrosshairMode, ChartCrosshairResolvedAxisValue, ChartCrosshairSnapMode, ChartCrosshairSynchronizationOptions, ChartCurve, ChartDataLabelContext, ChartDataLabelFormatter, ChartDataLabelOptions, ChartDataLabelPosition, ChartDataLabelsInput, ChartDownloadOptions, ChartDownsamplingAlgorithm, ChartDownsamplingInput, ChartDownsamplingOptions, ChartExportBackground, ChartExportBaseOptions, ChartExportErrorCode, ChartExportFormat, ChartExportOptions, ChartExportPresentationOptions, ChartExportResult, ChartField, ChartFinancialDirection, ChartFinancialFillMode, ChartFunnelLabelContent, ChartFunnelLabelTemplateContext, ChartFunnelOrientation, ChartFunnelPointMetadata, ChartFunnelStageContext, ChartFunnelStageVisibilityEvent, ChartGaugeCenterTemplateContext, ChartGaugeIndicator, ChartHeaderAlignment, ChartHeatmapCategory, ChartHeatmapCellData, ChartHeatmapColorMode, ChartHierarchicalKind, ChartHierarchyNodeContext, ChartHierarchyPointMetadata, ChartLabelMeasurement, ChartLegendItem, ChartLegendItemKind, ChartLegendItemTemplateContext, ChartLegendMode, ChartNavigationAxisTarget, ChartNavigationInput, ChartNavigationOptions, ChartNumericScaleType, ChartOhlcPointValue, ChartOverlayLayer, ChartPadding, ChartPdfExportOptions, ChartPdfMargins, ChartPdfPageOptions, ChartPdfPageSize, ChartPdfRenderMode, ChartPngExportOptions, ChartPoint, ChartPointEvent, ChartPointFocusEvent, ChartPointValue, ChartPointValueKind, ChartPolarFillMode, ChartPolarLabelContent, ChartPolarLabelPosition, ChartPolarLabelSide, ChartRadialArcFillMode, ChartRadialCurve, ChartRadialDatumVisibilityEvent, ChartRadialFillMode, ChartRadialGridShape, ChartRangePointValue, ChartRect, ChartReferenceBandLabelContext, ChartReferenceLabelPosition, ChartReferenceLabelTemplateContext, ChartReferenceLineLabelContext, ChartReferenceLineStyle, ChartRendererMode, ChartRoseScaleMode, ChartScalarPointValue, ChartSelectedPoint, ChartSelectionChangeEvent, ChartSelectionChangeSource, ChartSelectionMode, ChartSeriesFamily, ChartSeriesStyle, ChartSeriesType, ChartSeriesVisibilityEvent, ChartSize, ChartSliceContext, ChartSliceLabelTemplateContext, ChartSliceVisibilityEvent, ChartStackMode, ChartSubtitleTemplateContext, ChartSvgExportOptions, ChartSynchronizationAxisMapping, ChartSynchronizationInput, ChartSynchronizationMode, ChartSynchronizationOptions, ChartTitleTemplateContext, ChartTooltipPointContext, ChartTooltipTemplateContext, ChartTreemapLabelTemplateContext, ChartTreemapNodeVisibilityEvent, ChartTreemapSort, ChartTreemapTile, ChartValueAccessor, ChartValueFormatter, ChartViewportAxisRef, ChartViewportChangeEvent, ChartViewportChangePhase, ChartViewportChangeSource, ChartViewportConstraint, ChartViewportLinkGroup, ChartViewportLinkMode, ChartViewportState, ChartViewportSynchronizationOptions, ChartViewportWindow, ChartWaterfallDatumKind, ChartWaterfallLabelTemplateContext, ChartWaterfallPointContext, ChartWaterfallPointValue, ChartWaterfallVisualKind, ChartXAxisPosition, ChartXAxisType, ChartYAxisPosition, ChartYAxisType, HeatmapCellClickEvent, HeatmapColorStop };
+export type { ChartAnimationEasing, ChartAnimationInput, ChartAnimationOptions, ChartAnnotationAxisValue, ChartAnnotationLabelPlacement, ChartAnnotationLabelTemplateContext, ChartAnnotationMarker, ChartAreaFillMode, ChartAxisFormatter, ChartAxisLabelRotation, ChartAxisLabelTemplateContext, ChartAxisPosition, ChartAxisTick, ChartBarOrientation, ChartBrushActivation, ChartBrushAxisRange, ChartBrushCancelReason, ChartBrushCategoryRange, ChartBrushChangeEvent, ChartBrushContinuousRange, ChartBrushHitPolicy, ChartBrushLineStyle, ChartBrushMode, ChartBrushPhase, ChartBrushSelectionBehavior, ChartCategoryViewportWindow, ChartCenterTemplateContext, ChartColorLegendScale, ChartColorLegendStop, ChartColorLegendTick, ChartContinuousViewportWindow, ChartCoordinateSystem, ChartCrosshairAxisLabelContext, ChartCrosshairLineStyle, ChartCrosshairMode, ChartCrosshairResolvedAxisValue, ChartCrosshairSnapMode, ChartCrosshairSynchronizationOptions, ChartCurve, ChartDataLabelContext, ChartDataLabelFormatter, ChartDataLabelOptions, ChartDataLabelPosition, ChartDataLabelsInput, ChartDownloadOptions, ChartDownsamplingAlgorithm, ChartDownsamplingInput, ChartDownsamplingOptions, ChartExportBackground, ChartExportBaseOptions, ChartExportErrorCode, ChartExportFormat, ChartExportOptions, ChartExportPresentationOptions, ChartExportResult, ChartField, ChartFinancialDirection, ChartFinancialFillMode, ChartFunnelLabelContent, ChartFunnelLabelTemplateContext, ChartFunnelOrientation, ChartFunnelPointMetadata, ChartFunnelStageContext, ChartFunnelStageVisibilityEvent, ChartGaugeCenterTemplateContext, ChartGaugeIndicator, ChartHeaderAlignment, ChartHeatmapCategory, ChartHeatmapCellData, ChartHeatmapColorMode, ChartHierarchicalKind, ChartHierarchyNodeContext, ChartHierarchyPointMetadata, ChartLabelMeasurement, ChartLegendItem, ChartLegendItemKind, ChartLegendItemTemplateContext, ChartLegendMode, ChartLineStyle, ChartNavigationAxisTarget, ChartNavigationInput, ChartNavigationOptions, ChartNumericScaleType, ChartOhlcPointValue, ChartOverlayLayer, ChartPadding, ChartPdfExportOptions, ChartPdfMargins, ChartPdfPageOptions, ChartPdfPageSize, ChartPdfRenderMode, ChartPngExportOptions, ChartPoint, ChartPointEvent, ChartPointFocusEvent, ChartPointValue, ChartPointValueKind, ChartPolarFillMode, ChartPolarLabelContent, ChartPolarLabelPosition, ChartPolarLabelSide, ChartRadialArcFillMode, ChartRadialCurve, ChartRadialDatumVisibilityEvent, ChartRadialFillMode, ChartRadialGridShape, ChartRangePointValue, ChartRect, ChartReferenceBandLabelContext, ChartReferenceLabelPosition, ChartReferenceLabelTemplateContext, ChartReferenceLineLabelContext, ChartReferenceLineStyle, ChartRendererMode, ChartRoseScaleMode, ChartScalarPointValue, ChartSelectedPoint, ChartSelectionChangeEvent, ChartSelectionChangeSource, ChartSelectionMode, ChartSeriesFamily, ChartSeriesStyle, ChartSeriesType, ChartSeriesVisibilityEvent, ChartSize, ChartSliceContext, ChartSliceLabelTemplateContext, ChartSliceVisibilityEvent, ChartStackMode, ChartSubtitleTemplateContext, ChartSvgExportOptions, ChartSynchronizationAxisMapping, ChartSynchronizationInput, ChartSynchronizationMode, ChartSynchronizationOptions, ChartTitleTemplateContext, ChartTooltipPointContext, ChartTooltipTemplateContext, ChartTreemapLabelTemplateContext, ChartTreemapNodeVisibilityEvent, ChartTreemapSort, ChartTreemapTile, ChartValueAccessor, ChartValueFormatter, ChartViewportAxisRef, ChartViewportChangeEvent, ChartViewportChangePhase, ChartViewportChangeSource, ChartViewportConstraint, ChartViewportLinkGroup, ChartViewportLinkMode, ChartViewportState, ChartViewportSynchronizationOptions, ChartViewportWindow, ChartWaterfallDatumKind, ChartWaterfallLabelTemplateContext, ChartWaterfallPointContext, ChartWaterfallPointValue, ChartWaterfallVisualKind, ChartXAxisPosition, ChartXAxisType, ChartYAxisPosition, ChartYAxisType, HeatmapCellClickEvent, HeatmapColorStop };