stz-chart-maker 2.3.9 → 2.4.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ChartTypeRegistry, ChartType, ChartDataset, GridLineOptions, FontSpec, Tick, Chart as Chart$1, ChartOptions, PluginOptionsByType, ChartEvent, ActiveElement, LegendOptions, TooltipOptions, Plugin as Plugin$1, TooltipItem } from 'chart.js';
+import { ChartTypeRegistry, ChartType, ChartDataset, DefaultDataPoint, PointStyle, GridLineOptions, FontSpec, Tick, Chart as Chart$1, ChartOptions, PluginOptionsByType, ChartEvent, ActiveElement, LegendOptions, TooltipOptions, Plugin, TooltipItem } from 'chart.js';
 import { TreemapControllerDatasetOptions } from 'chartjs-chart-treemap';
 import { ZoomOptions, PanOptions, LimitOptions, ScaleLimits } from 'chartjs-plugin-zoom/types/options';
 
@@ -68,14 +68,23 @@ interface DatasetExtensions {
 }
 type CustomChartDatasets<TType extends ChartType = ChartType> = ChartDataset<TType, any> & DatasetExtensions;
 type ArcDataset<TType extends ArcChartType = ArcChartType> = ChartDataset<TType, (number | null)[]> & DatasetExtensions;
-type CartesianDataset<TType extends CartesianChartType = CartesianChartType> = ChartDataset<TType, (number | null)[]> & DatasetExtensions & {
+type CartesianDataset<TType extends CartesianChartType = CartesianChartType> = ChartDataset<TType, DefaultDataPoint<TType>> & DatasetExtensions & {
     yAxisID?: string;
     xAxisID?: string;
     stack?: string;
     order?: number;
     DATASET_ID?: string;
 };
-type CustomCartesianDataset<TType extends CartesianChartType = CartesianChartType> = ChartDataset<TType, (number | null)[]> & DatasetExtensions & {
+type ScatterDataset = ChartDataset<'scatter', DefaultDataPoint<'scatter'>> & DatasetExtensions & {
+    yAxisID?: string;
+    xAxisID?: string;
+    stack?: string;
+    order?: number;
+    _dskey?: string;
+    image?: string;
+    images?: string[];
+};
+type CustomCartesianDataset<TType extends CartesianChartType = CartesianChartType> = ChartDataset<TType, DefaultDataPoint<TType>> & DatasetExtensions & {
     yAxisID?: string;
     xAxisID?: string;
     stack?: string;
@@ -88,6 +97,84 @@ type CustomTreemapDataset<DType = Record<string, unknown>> = Omit<TreemapControl
     groups?: string[];
     sumKeys?: string[];
 };
+interface ScatterPointContext {
+    raw: Record<string, unknown>;
+    x: number;
+    y: number;
+    dataIndex: number;
+    datasetIndex: number;
+    dataset: ScatterDataset;
+}
+interface ScatterPointHighlightStyle {
+    /** 강조 대상 포인트에 적용할 모양입니다. 이미지도 사용할 수 있습니다. */
+    pointStyle?: PointStyle | HTMLImageElement | HTMLCanvasElement;
+    /** 강조 대상 포인트의 반지름입니다. */
+    pointRadius?: number;
+    /** 강조 대상 포인트의 hover 반지름입니다. */
+    pointHoverRadius?: number;
+    /** 강조 대상 포인트의 배경색입니다. */
+    pointBackgroundColor?: string;
+    /** 강조 대상 포인트의 테두리 색상입니다. */
+    pointBorderColor?: string;
+    /** 강조 대상 포인트의 테두리 두께입니다. */
+    pointBorderWidth?: number;
+}
+interface ScatterQuadrantOptions {
+    /** 수직 기준선의 데이터 값입니다. 기본값은 `0` 입니다. */
+    x?: number;
+    /** 수평 기준선의 데이터 값입니다. 기본값은 `0` 입니다. */
+    y?: number;
+    /** 4분면별 배경색입니다. */
+    backgroundColors?: Partial<Record<'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight', string>>;
+    /** 기준선 색상입니다. */
+    borderColor?: string;
+    /** 기준선 두께입니다. */
+    borderWidth?: number;
+    /** 4분면 라벨입니다. `false` 를 주면 해당 라벨을 숨깁니다. */
+    labels?: Partial<Record<'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight', string | false>>;
+    /** 4분면 라벨 색상입니다. */
+    labelColor?: string;
+    /** 4분면 라벨 글자 크기입니다. */
+    fontSize?: number;
+    /** 4분면 라벨 글자 굵기입니다. */
+    fontWeight?: string;
+}
+interface ScatterTrendLineOptions {
+    /** 회귀선을 계산할 대상 데이터셋 인덱스입니다. 미지정 시 전체 데이터를 기준으로 계산합니다. */
+    datasetIndex?: number;
+    /** 회귀선 색상입니다. */
+    borderColor?: string;
+    /** 회귀선 두께입니다. */
+    borderWidth?: number;
+    /** 회귀선 dash 패턴입니다. */
+    borderDash?: number[];
+    /** `false` 면 실제 데이터 범위까지만 그립니다. 기본값은 축 범위 전체까지 확장합니다. */
+    extend?: boolean;
+}
+interface ScatterCrosshairOptions {
+    /** 가이드라인 색상입니다. */
+    color?: string;
+    /** 가이드라인 두께입니다. */
+    width?: number;
+    /** 가이드라인 dash 패턴입니다. */
+    dash?: number[];
+    /** 교차점 라벨 표시 여부입니다. 기본값은 `true` 입니다. */
+    showLabels?: boolean;
+    /** 교차점 라벨 배경색입니다. */
+    labelBackgroundColor?: string;
+    /** 교차점 라벨 글자색입니다. */
+    labelColor?: string;
+    /** X 값 포맷터입니다. */
+    xFormatter?: (value: number) => string;
+    /** Y 값 포맷터입니다. */
+    yFormatter?: (value: number) => string;
+}
+interface ScatterAxisRangePadding {
+    /** X축 여유 비율입니다. `0.1` 이면 데이터 범위의 10%를 양쪽에 추가합니다. */
+    x?: number;
+    /** Y축 여유 비율입니다. `0.1` 이면 데이터 범위의 10%를 양쪽에 추가합니다. */
+    y?: number;
+}
 
 /**
  * ═════════════════════════════════════════════════════════════
@@ -607,6 +694,7 @@ type CustomArcChartOptions<TType extends ArcChartType = ArcChartType> = CustomCh
 };
 type CustomBarChartOptions = CustomChartOptions<'bar'>;
 type CustomLineChartOptions = CustomChartOptions<'line'>;
+type CustomScatterChartOptions = CustomChartOptions<'scatter'>;
 type CustomBubbleChartOptions = CustomChartOptions<'bubble'>;
 type CustomPieChartOptions = CustomArcChartOptions<'pie'>;
 type CustomDoughnutChartOptions = CustomArcChartOptions<'doughnut'>;
@@ -614,6 +702,31 @@ type CustomTreemapChartOptions = CustomChartOptions<'treemap'> & {
     scales?: never;
 };
 type Constructor<TType extends ChartType, TInstance> = new (type: TType, labels: (string | number)[], datasets: any[], options?: CustomChartOptions<TType>, plugins?: []) => TInstance;
+interface StzClickItem {
+    datasetIndex: number;
+    dataIndex: number;
+    datasetLabel?: string;
+    datasetUid?: string;
+    label?: string | number | unknown;
+    raw: unknown;
+    value: unknown;
+    x?: unknown;
+    y?: unknown;
+    radius?: number;
+}
+interface StzClickContext<TType extends ChartType> {
+    chart: Chart$1<TType>;
+    chartType?: TType;
+    primary?: StzClickItem;
+    items: StzClickItem[];
+    pointer: {
+        canvasX: number | null;
+        canvasY: number | null;
+        xValue?: unknown;
+        yValue?: unknown;
+    };
+}
+type StzClickHandler<TType extends ChartType> = (this: Chart$1<TType>, event: ChartEvent, elements: ActiveElement[], context: StzClickContext<TType>) => void;
 
 /**
  * ═════════════════════════════════════════════════════════════
@@ -713,6 +826,26 @@ interface LineChartBuilder extends CartesianChartBuilder<'line'> {
     setAllPointHoverRadius(hoverRadius: number): this;
     sparkLineChart(): this;
 }
+interface ScatterChartBuilder extends CartesianChartBuilder<'scatter'> {
+    setPointRadius(datasetIndex: number, radius: number): this;
+    setAllPointRadius(radius: number): this;
+    setPointHoverRadius(datasetIndex: number, hoverRadius: number): this;
+    setAllPointHoverRadius(hoverRadius: number): this;
+    setPointStyle(datasetIndex: number, pointStyle: PointStyle): this;
+    setAllPointStyle(pointStyle: PointStyle): this;
+    setShowLine(datasetIndex: number, showLine: boolean): this;
+    setAllShowLine(showLine: boolean): this;
+    setBorderWidth(datasetIndex: number, borderWidth: number): this;
+    setAllBorderWidth(borderWidth: number): this;
+    setPointColorByValue(resolver: (point: ScatterPointContext) => string): this;
+    setPointStyleByValue(resolver: (point: ScatterPointContext) => ScatterPointHighlightStyle | undefined): this;
+    setPointStyleWhere(predicate: (point: ScatterPointContext) => boolean, pointStyle: PointStyle | HTMLImageElement | HTMLCanvasElement): this;
+    addQuadrant(options?: ScatterQuadrantOptions): this;
+    addTrendLine(options?: ScatterTrendLineOptions): this;
+    addCrosshair(options?: ScatterCrosshairOptions): this;
+    highlightPoints(predicate: (point: ScatterPointContext) => boolean, style?: ScatterPointHighlightStyle): this;
+    setAxisRangeFromData(padding?: number | ScatterAxisRangePadding): this;
+}
 interface BubbleChartBuilder extends CartesianChartBuilder<'bubble'> {
     setBubbleRadius(datasetIndex: number, radius: number): this;
     setBubbleDataRadius(datasetIndex: number, dataIndex: number, radius: number): this;
@@ -824,6 +957,7 @@ type Types_CustomDoughnutChartOptions = CustomDoughnutChartOptions;
 type Types_CustomLineChartOptions = CustomLineChartOptions;
 type Types_CustomOptionPlugins<TType extends ChartType = ChartType> = CustomOptionPlugins<TType>;
 type Types_CustomPieChartOptions = CustomPieChartOptions;
+type Types_CustomScatterChartOptions = CustomScatterChartOptions;
 type Types_CustomTreemapChartOptions = CustomTreemapChartOptions;
 type Types_CustomTreemapDataset<DType = Record<string, unknown>> = CustomTreemapDataset<DType>;
 type Types_DeepPartial<T> = DeepPartial<T>;
@@ -839,6 +973,14 @@ type Types_PieChartBuilder = PieChartBuilder;
 type Types_Position = Position;
 type Types_RadarChartBuilder = RadarChartBuilder;
 type Types_RadialChartType = RadialChartType;
+type Types_ScatterAxisRangePadding = ScatterAxisRangePadding;
+type Types_ScatterChartBuilder = ScatterChartBuilder;
+type Types_ScatterCrosshairOptions = ScatterCrosshairOptions;
+type Types_ScatterDataset = ScatterDataset;
+type Types_ScatterPointContext = ScatterPointContext;
+type Types_ScatterPointHighlightStyle = ScatterPointHighlightStyle;
+type Types_ScatterQuadrantOptions = ScatterQuadrantOptions;
+type Types_ScatterTrendLineOptions = ScatterTrendLineOptions;
 type Types_SegmentImageConfig = SegmentImageConfig;
 type Types_SettingOptions = SettingOptions;
 type Types_SpinnerOverlayConfig = SpinnerOverlayConfig;
@@ -846,13 +988,16 @@ type Types_SpinnerOverlayOption = SpinnerOverlayOption;
 type Types_SpinnerOverlayRenderContext = SpinnerOverlayRenderContext;
 type Types_SpinnerOverlaySpinnerContent = SpinnerOverlaySpinnerContent;
 type Types_SpinnerOverlayStyle = SpinnerOverlayStyle;
+type Types_StzClickContext<TType extends ChartType> = StzClickContext<TType>;
+type Types_StzClickHandler<TType extends ChartType> = StzClickHandler<TType>;
+type Types_StzClickItem = StzClickItem;
 type Types_TimeScaleConfig = TimeScaleConfig;
 type Types_TimeScaleType = TimeScaleType;
 type Types_TimeUnit = TimeUnit;
 type Types_TreemapChartBuilder = TreemapChartBuilder;
 type Types_UidImageMapping = UidImageMapping;
 declare namespace Types {
-  export type { Types_Align as Align, Types_ArcChartBuilder as ArcChartBuilder, Types_ArcChartType as ArcChartType, Types_ArcDataset as ArcDataset, Types_BarChartBuilder as BarChartBuilder, Types_BubbleChartBuilder as BubbleChartBuilder, Types_CartesianChartBuilder as CartesianChartBuilder, Types_CartesianChartType as CartesianChartType, Types_CartesianDataset as CartesianDataset, Types_ChartBuilder as ChartBuilder, Types_Color as Color, Types_CommonAxes as CommonAxes, Types_CommonAxesSacels as CommonAxesSacels, Types_CommonCartesian as CommonCartesian, Types_CommonCartesianAxes as CommonCartesianAxes, Types_CommonCartesianLegendConfig as CommonCartesianLegendConfig, Types_CommonCartesianTicks as CommonCartesianTicks, Types_CommonCartesianTitleConfig as CommonCartesianTitleConfig, Types_CommonTicks as CommonTicks, Types_Constructor as Constructor, Types_CustomArcChartOptions as CustomArcChartOptions, Types_CustomBarChartOptions as CustomBarChartOptions, Types_CustomBubbleChartOptions as CustomBubbleChartOptions, Types_CustomCartesianDataset as CustomCartesianDataset, Types_CustomChartDatasets as CustomChartDatasets, Types_CustomChartOptions as CustomChartOptions, Types_CustomDoughnutChartOptions as CustomDoughnutChartOptions, Types_CustomLineChartOptions as CustomLineChartOptions, Types_CustomOptionPlugins as CustomOptionPlugins, Types_CustomPieChartOptions as CustomPieChartOptions, Types_CustomTreemapChartOptions as CustomTreemapChartOptions, Types_CustomTreemapDataset as CustomTreemapDataset, Types_DeepPartial as DeepPartial, Types_DeepPartialCartesianAxes as DeepPartialCartesianAxes, Types_DeepPartialPluginOptions as DeepPartialPluginOptions, Types_DoughnutChartBuilder as DoughnutChartBuilder, Types_HierarchicalChartType as HierarchicalChartType, Types_HtmlLegendOptions as HtmlLegendOptions, Types_LineChartBuilder as LineChartBuilder, Types_Mode as Mode, Types_Override as Override, Types_PieChartBuilder as PieChartBuilder, Types_Position as Position, Types_RadarChartBuilder as RadarChartBuilder, Types_RadialChartType as RadialChartType, Types_SegmentImageConfig as SegmentImageConfig, Types_SettingOptions as SettingOptions, Types_SpinnerOverlayConfig as SpinnerOverlayConfig, Types_SpinnerOverlayOption as SpinnerOverlayOption, Types_SpinnerOverlayRenderContext as SpinnerOverlayRenderContext, Types_SpinnerOverlaySpinnerContent as SpinnerOverlaySpinnerContent, Types_SpinnerOverlayStyle as SpinnerOverlayStyle, Types_TimeScaleConfig as TimeScaleConfig, Types_TimeScaleType as TimeScaleType, Types_TimeUnit as TimeUnit, Types_TreemapChartBuilder as TreemapChartBuilder, Types_UidImageMapping as UidImageMapping };
+  export type { Types_Align as Align, Types_ArcChartBuilder as ArcChartBuilder, Types_ArcChartType as ArcChartType, Types_ArcDataset as ArcDataset, Types_BarChartBuilder as BarChartBuilder, Types_BubbleChartBuilder as BubbleChartBuilder, Types_CartesianChartBuilder as CartesianChartBuilder, Types_CartesianChartType as CartesianChartType, Types_CartesianDataset as CartesianDataset, Types_ChartBuilder as ChartBuilder, Types_Color as Color, Types_CommonAxes as CommonAxes, Types_CommonAxesSacels as CommonAxesSacels, Types_CommonCartesian as CommonCartesian, Types_CommonCartesianAxes as CommonCartesianAxes, Types_CommonCartesianLegendConfig as CommonCartesianLegendConfig, Types_CommonCartesianTicks as CommonCartesianTicks, Types_CommonCartesianTitleConfig as CommonCartesianTitleConfig, Types_CommonTicks as CommonTicks, Types_Constructor as Constructor, Types_CustomArcChartOptions as CustomArcChartOptions, Types_CustomBarChartOptions as CustomBarChartOptions, Types_CustomBubbleChartOptions as CustomBubbleChartOptions, Types_CustomCartesianDataset as CustomCartesianDataset, Types_CustomChartDatasets as CustomChartDatasets, Types_CustomChartOptions as CustomChartOptions, Types_CustomDoughnutChartOptions as CustomDoughnutChartOptions, Types_CustomLineChartOptions as CustomLineChartOptions, Types_CustomOptionPlugins as CustomOptionPlugins, Types_CustomPieChartOptions as CustomPieChartOptions, Types_CustomScatterChartOptions as CustomScatterChartOptions, Types_CustomTreemapChartOptions as CustomTreemapChartOptions, Types_CustomTreemapDataset as CustomTreemapDataset, Types_DeepPartial as DeepPartial, Types_DeepPartialCartesianAxes as DeepPartialCartesianAxes, Types_DeepPartialPluginOptions as DeepPartialPluginOptions, Types_DoughnutChartBuilder as DoughnutChartBuilder, Types_HierarchicalChartType as HierarchicalChartType, Types_HtmlLegendOptions as HtmlLegendOptions, Types_LineChartBuilder as LineChartBuilder, Types_Mode as Mode, Types_Override as Override, Types_PieChartBuilder as PieChartBuilder, Types_Position as Position, Types_RadarChartBuilder as RadarChartBuilder, Types_RadialChartType as RadialChartType, Types_ScatterAxisRangePadding as ScatterAxisRangePadding, Types_ScatterChartBuilder as ScatterChartBuilder, Types_ScatterCrosshairOptions as ScatterCrosshairOptions, Types_ScatterDataset as ScatterDataset, Types_ScatterPointContext as ScatterPointContext, Types_ScatterPointHighlightStyle as ScatterPointHighlightStyle, Types_ScatterQuadrantOptions as ScatterQuadrantOptions, Types_ScatterTrendLineOptions as ScatterTrendLineOptions, Types_SegmentImageConfig as SegmentImageConfig, Types_SettingOptions as SettingOptions, Types_SpinnerOverlayConfig as SpinnerOverlayConfig, Types_SpinnerOverlayOption as SpinnerOverlayOption, Types_SpinnerOverlayRenderContext as SpinnerOverlayRenderContext, Types_SpinnerOverlaySpinnerContent as SpinnerOverlaySpinnerContent, Types_SpinnerOverlayStyle as SpinnerOverlayStyle, Types_StzClickContext as StzClickContext, Types_StzClickHandler as StzClickHandler, Types_StzClickItem as StzClickItem, Types_TimeScaleConfig as TimeScaleConfig, Types_TimeScaleType as TimeScaleType, Types_TimeUnit as TimeUnit, Types_TreemapChartBuilder as TreemapChartBuilder, Types_UidImageMapping as UidImageMapping };
 }
 
 interface ChartConfig {
@@ -866,7 +1011,7 @@ interface ChartConfig {
 type ChartBuilderMap = {
     line: LineChartBuilder;
     bar: BarChartBuilder;
-    scatter: CartesianChartBuilder<'scatter'>;
+    scatter: ScatterChartBuilder;
     bubble: CartesianChartBuilder<'bubble'>;
     doughnut: DoughnutChartBuilder;
     pie: PieChartBuilder;
@@ -883,7 +1028,7 @@ declare abstract class Chart<TType extends ChartType, TOptions extends CustomCha
     protected get datasets(): CustomChartDatasets<TType>[];
     protected set datasets(value: CustomChartDatasets<TType>[]);
     constructor(type: TType, labels: (string | number)[] | undefined, _datasets: CustomChartDatasets<TType>[], options: TOptions, plugins?: any | undefined);
-    static create<TType extends ChartType>(type: TType, labels: (string | number)[], datasets: CustomChartDatasets<TType>[], options?: CustomChartOptions<TType>, plugins?: Plugin$1): TType extends keyof ChartBuilderMap ? ChartBuilderMap[TType] : ChartBuilder<TType>;
+    static create<TType extends ChartType>(type: TType, labels: (string | number)[], datasets: CustomChartDatasets<TType>[], options?: CustomChartOptions<TType>, plugins?: Plugin): TType extends keyof ChartBuilderMap ? ChartBuilderMap[TType] : ChartBuilder<TType>;
     static register<TType extends ChartType, TInstance>(type: TType, wrapperClass: Constructor<TType, TInstance>): void;
     static has(type: ChartType): boolean;
     protected cloneValue<T>(value: T): T;
@@ -895,6 +1040,7 @@ declare abstract class Chart<TType extends ChartType, TOptions extends CustomCha
     protected getGroupedDatasetIndexes(index: number): number[];
     protected setDatasetVisibilityState(dataset: CustomChartDatasets<TType>, visible: boolean): void;
     protected getDatasetVisibilityState(dataset: CustomChartDatasets<TType>): boolean;
+    protected prepareOptions(options: TOptions): TOptions;
     clone(): this;
     copy(): this;
     protected mergePlugins<TPlugin>(plugins: TPlugin[] | undefined, required: TPlugin[]): TPlugin[];
@@ -1975,6 +2121,147 @@ declare class LineChart extends CartesianChart<'line'> implements LineChartBuild
     sparkLineChart(): this;
 }
 
+declare class ScatterChart extends CartesianChart<'scatter'> implements ScatterChartBuilder {
+    constructor(type: 'scatter', labels: (string | number)[], datasets: ScatterDataset[], options?: CustomScatterChartOptions, plugins?: Plugin);
+    protected requireLabels(): boolean;
+    makeConfig(id?: string): {
+        _chartId: any;
+        type: any;
+        data: any;
+        options: any;
+        plugins: any;
+    };
+    setPointRadius(datasetIndex: number, radius: number): this;
+    setAllPointRadius(radius: number): this;
+    setPointHoverRadius(datasetIndex: number, hoverRadius: number): this;
+    setAllPointHoverRadius(hoverRadius: number): this;
+    setPointStyle(datasetIndex: number, pointStyle: PointStyle): this;
+    setAllPointStyle(pointStyle: PointStyle): this;
+    setShowLine(datasetIndex: number, showLine: boolean): this;
+    setAllShowLine(showLine: boolean): this;
+    setBorderWidth(datasetIndex: number, borderWidth: number): this;
+    setAllBorderWidth(borderWidth: number): this;
+    private resolvePointValue;
+    private createPointContext;
+    private resolveOptionValue;
+    private applyPointOption;
+    private collectScatterPoints;
+    private resolveAxisBounds;
+    /**
+     * @description 값에 따라 포인트 색상을 정합니다.
+     * @param {(point: ScatterPointContext) => string} resolver
+     * @returns {this}
+     * @Since 2.4.0
+     */
+    setPointColorByValue(resolver: (point: ScatterPointContext) => string): this;
+    /**
+     * @description 값에 따라 포인트의 모양, 크기, 색상, 테두리를 한 번에 결정합니다.
+     * @param resolver
+     * @returns {this}
+     * @since 2.4.0
+     * @example
+     * chart.setPointStyleByValue(point => ({
+     *   pointStyle: point.raw.status === 'alert' ? alertImage : 'circle',
+     *   pointRadius: point.y >= 80 ? 8 : 4,
+     *   pointBackgroundColor: point.y >= 80 ? '#ef4444' : '#3b82f6',
+     *   pointBorderColor: '#0f172a',
+     *   pointBorderWidth: 1,
+     * }));
+     */
+    setPointStyleByValue(resolver: (point: ScatterPointContext) => ScatterPointHighlightStyle | undefined): this;
+    /**
+     * @description 특정 조건의 포인트 모양을 변경합니다. 이미지 사용 가능
+     * @param predicate
+     * @param pointStyle
+     * @returns {this}
+     * @since 2.4.0
+     * @example
+     * const alertImage = new Image();
+     * alertImage.src = '/icons/alert-point.png';
+     *
+     * chart.setPointStyleWhere(
+     *   point => point.raw.status === 'alert',
+     *   alertImage
+     * );
+     */
+    setPointStyleWhere(predicate: (point: ScatterPointContext) => boolean, pointStyle: PointStyle | HTMLImageElement | HTMLCanvasElement): this;
+    /**
+     * @description Scatter 기준선을 중심으로 4개 영역을 구분합니다.
+     * @param options
+     * @returns {this}
+     * @since 2.4.0
+     * @example
+     * chart.addQuadrant({
+     *   x: 50,
+     *   y: 50,
+     *   labels: {
+     *     topLeft: '낮은 X / 높은 Y',
+     *     topRight: '높은 X / 높은 Y',
+     *     bottomLeft: '낮은 X / 낮은 Y',
+     *     bottomRight: '높은 X / 낮은 Y',
+     *   },
+     * });
+     */
+    addQuadrant(options?: ScatterQuadrantOptions): this;
+    /**
+     * @description 선형 회귀선을 표시합니다.
+     * @param options
+     * @returns {this}
+     * @since 2.4.0
+     * @example
+     * chart.addTrendLine({
+     *   borderColor: '#ef4444',
+     *   borderDash: [6, 4],
+     * });
+     */
+    addTrendLine(options?: ScatterTrendLineOptions): this;
+    /**
+     * @description 마우스 위치의 X/Y 가이드라인과 값을 표시합니다.
+     * @param options
+     * @returns {this}
+     * @since 2.4.0
+     * @example
+     * chart.addCrosshair({
+     *   color: 'rgba(37, 99, 235, 0.65)',
+     *   xFormatter: value => `${value} ms`,
+     *   yFormatter: value => `${value}%`,
+     * });
+     */
+    addCrosshair(options?: ScatterCrosshairOptions): this;
+    /**
+     * @description 데이터 강조를 합니다.
+     * @param predicate
+     * @param style
+     * @returns {this}
+     * @since 2.4.0
+     * @example
+     * chart.highlightPoints(
+     *   point => point.y >= 80,
+     *   {
+     *     pointRadius: 8,
+     *     pointBackgroundColor: '#ef4444',
+     *     pointBorderColor: '#7f1d1d',
+     *   }
+     * );
+     */
+    highlightPoints(predicate: (point: ScatterPointContext) => boolean, style?: ScatterPointHighlightStyle): this;
+    /**
+     * @description 데이터 기준으로 축 범위를 자동 계산하고 padding을 줍니다.
+     * @param padding
+     * @returns {this}
+     * @since 2.4.0
+     * @example
+     * chart.setAxisRangeFromData(0.15);
+     *
+     * @example
+     * chart.setAxisRangeFromData({
+     *   x: 0.2,
+     *   y: 0.1,
+     * });
+     */
+    setAxisRangeFromData(padding?: number | ScatterAxisRangePadding): this;
+}
+
 declare class BubbleChart extends CartesianChart<'bubble'> implements BubbleChartBuilder {
     constructor(type: 'bubble', labels: (string | number)[], datasets: CartesianDataset<'bubble'>[], options?: CustomBubbleChartOptions, plugins?: any);
     protected requireLabels(): boolean;
@@ -2137,7 +2424,7 @@ declare class BubbleChart extends CartesianChart<'bubble'> implements BubbleChar
 declare abstract class ArcChart<TType extends ArcChartType> extends Chart<TType> implements ArcChartBuilder<TType> {
     readonly type: TType;
     private _chartId?;
-    protected constructor(type: TType, labels: (string | number)[], datasets: ChartDataset<TType, (number | null)[]>[], options?: CustomArcChartOptions<TType>, plugins?: Plugin$1);
+    protected constructor(type: TType, labels: (string | number)[], datasets: ChartDataset<TType, (number | null)[]>[], options?: CustomArcChartOptions<TType>, plugins?: Plugin);
     get chartId(): string;
     set chartId(value: string);
     protected requireLabels(): boolean;
@@ -2555,7 +2842,7 @@ declare class PieChart extends ArcChart<'pie'> implements PieChartBuilder {
 
 declare class TreemapChart extends Chart<'treemap', CustomTreemapChartOptions> implements TreemapChartBuilder {
     private _chartId?;
-    constructor(type: 'treemap', labels: undefined, datasets: CustomTreemapDataset[], options?: CustomTreemapChartOptions, plugins?: Plugin$1);
+    constructor(type: 'treemap', labels: undefined, datasets: CustomTreemapDataset[], options?: CustomTreemapChartOptions, plugins?: Plugin);
     get chartId(): string;
     set chartId(value: string);
     protected normalize(): void;
@@ -2719,6 +3006,55 @@ declare const createAssignedTasksPlugin: (fieldName?: string, options?: {
     afterDatasetsDraw(chart: any, args: any, pluginOptions: any): void;
 };
 
+/**
+ * @description Scatter 기준선을 중심으로 4개 영역을 구분하는 플러그인 인스턴스를 생성합니다.
+ * @param options
+ * @returns Chart.js 플러그인 객체
+ * @group Scatter Plugins
+ * @example
+ * ```ts
+ * chart.setPlugin(
+ *   createScatterQuadrantPlugin({
+ *     x: 50,
+ *     y: 50,
+ *   })
+ * );
+ * ```
+ */
+declare function createScatterQuadrantPlugin(options?: ScatterQuadrantOptions): Plugin<'scatter'>;
+/**
+ * @description Scatter 데이터에 대한 선형 회귀선을 그리는 플러그인 인스턴스를 생성합니다.
+ * @param options
+ * @returns Chart.js 플러그인 객체
+ * @group Scatter Plugins
+ * @example
+ * ```ts
+ * chart.setPlugin(
+ *   createScatterTrendLinePlugin({
+ *     borderColor: '#ef4444',
+ *     borderDash: [6, 4],
+ *   })
+ * );
+ * ```
+ */
+declare function createScatterTrendLinePlugin(options?: ScatterTrendLineOptions): Plugin<'scatter'>;
+/**
+ * @description Hover된 포인트 기준으로 X/Y 가이드라인과 값을 표시하는 플러그인 인스턴스를 생성합니다.
+ * @param options
+ * @returns Chart.js 플러그인 객체
+ * @group Scatter Plugins
+ * @example
+ * ```ts
+ * chart.setPlugin(
+ *   createScatterCrosshairPlugin({
+ *     xFormatter: value => `${value} ms`,
+ *     yFormatter: value => `${value}%`,
+ *   })
+ * );
+ * ```
+ */
+declare function createScatterCrosshairPlugin(options?: ScatterCrosshairOptions): Plugin<'scatter'>;
+
 /**
  * @description 데이터가 없을 때 'No data' 텍스트를 차트 중앙에 표시하는 플러그인입니다.
  * @group Common Plugins
@@ -2892,7 +3228,7 @@ declare const customDatasetPlugins: {
  * @description 임계값을 초과하는 데이터 포인트에 깜빡이는 하이라이트 효과를 표시하는 플러그인입니다.
  * @group Common Plugins
  */
-declare const blinkPlugin: Plugin$1;
+declare const blinkPlugin: Plugin;
 /**
  * @description 도넛 차트 중앙에 표시할 HTML 문자열을 생성하는 유틸리티 함수입니다.
  * @param percent - 퍼센트 값
@@ -3095,6 +3431,10 @@ declare const defaultLineScales: CommonAxesSacels;
 declare const createDefaultLineOptions: (userOptions?: CustomLineChartOptions, defaultScales?: CommonAxesSacels) => CustomLineChartOptions;
 declare const sparkLineOptions: CustomLineChartOptions;
 
+declare const defaultScatterTooltipCallback: (context: TooltipItem<"scatter">) => string;
+declare const defaultScatterScales: CommonAxesSacels;
+declare const createDefaultScatterOptions: (userOptions?: CustomScatterChartOptions, defaultScales?: CommonAxesSacels) => CustomScatterChartOptions;
+
 declare const defaultBubbleTooltipCallback: (context: TooltipItem<"bubble">) => string;
 declare const defaultBubbleScales: CommonAxesSacels;
 declare const createDefaultBubbleOptions: (userOptions?: CustomBubbleChartOptions, defaultScales?: CommonAxesSacels) => CustomBubbleChartOptions;
@@ -3184,7 +3524,11 @@ declare const LocalDefaults_createDefaultCartesianScales: typeof createDefaultCa
 declare const LocalDefaults_createDefaultDoughnutOptions: typeof createDefaultDoughnutOptions;
 declare const LocalDefaults_createDefaultLineOptions: typeof createDefaultLineOptions;
 declare const LocalDefaults_createDefaultPieOptions: typeof createDefaultPieOptions;
+declare const LocalDefaults_createDefaultScatterOptions: typeof createDefaultScatterOptions;
 declare const LocalDefaults_createDefaultTreemapOptions: typeof createDefaultTreemapOptions;
+declare const LocalDefaults_createScatterCrosshairPlugin: typeof createScatterCrosshairPlugin;
+declare const LocalDefaults_createScatterQuadrantPlugin: typeof createScatterQuadrantPlugin;
+declare const LocalDefaults_createScatterTrendLinePlugin: typeof createScatterTrendLinePlugin;
 declare const LocalDefaults_createStatusPlugin: typeof createStatusPlugin;
 declare const LocalDefaults_createTodayLinePlugin: typeof createTodayLinePlugin;
 declare const LocalDefaults_createWeekendPlugin: typeof createWeekendPlugin;
@@ -3198,6 +3542,8 @@ declare const LocalDefaults_defaultDoughnutTooltipCallback: typeof defaultDoughn
 declare const LocalDefaults_defaultLineScales: typeof defaultLineScales;
 declare const LocalDefaults_defaultLineTooltipCallback: typeof defaultLineTooltipCallback;
 declare const LocalDefaults_defaultPieTooltipCallback: typeof defaultPieTooltipCallback;
+declare const LocalDefaults_defaultScatterScales: typeof defaultScatterScales;
+declare const LocalDefaults_defaultScatterTooltipCallback: typeof defaultScatterTooltipCallback;
 declare const LocalDefaults_defaultTreemapTooltipCallback: typeof defaultTreemapTooltipCallback;
 declare const LocalDefaults_doughnutCenterTextPlugin: typeof doughnutCenterTextPlugin;
 declare const LocalDefaults_loadingPlugin: typeof loadingPlugin;
@@ -3232,7 +3578,11 @@ declare namespace LocalDefaults {
     LocalDefaults_createDefaultDoughnutOptions as createDefaultDoughnutOptions,
     LocalDefaults_createDefaultLineOptions as createDefaultLineOptions,
     LocalDefaults_createDefaultPieOptions as createDefaultPieOptions,
+    LocalDefaults_createDefaultScatterOptions as createDefaultScatterOptions,
     LocalDefaults_createDefaultTreemapOptions as createDefaultTreemapOptions,
+    LocalDefaults_createScatterCrosshairPlugin as createScatterCrosshairPlugin,
+    LocalDefaults_createScatterQuadrantPlugin as createScatterQuadrantPlugin,
+    LocalDefaults_createScatterTrendLinePlugin as createScatterTrendLinePlugin,
     LocalDefaults_createStatusPlugin as createStatusPlugin,
     LocalDefaults_createTodayLinePlugin as createTodayLinePlugin,
     LocalDefaults_createWeekendPlugin as createWeekendPlugin,
@@ -3246,6 +3596,8 @@ declare namespace LocalDefaults {
     LocalDefaults_defaultLineScales as defaultLineScales,
     LocalDefaults_defaultLineTooltipCallback as defaultLineTooltipCallback,
     LocalDefaults_defaultPieTooltipCallback as defaultPieTooltipCallback,
+    LocalDefaults_defaultScatterScales as defaultScatterScales,
+    LocalDefaults_defaultScatterTooltipCallback as defaultScatterTooltipCallback,
     LocalDefaults_defaultTreemapTooltipCallback as defaultTreemapTooltipCallback,
     LocalDefaults_doughnutCenterTextPlugin as doughnutCenterTextPlugin,
     LocalDefaults_loadingPlugin as loadingPlugin,
@@ -3608,6 +3960,7 @@ declare const T$: {
     readonly CartesianChart: typeof CartesianChart;
     readonly BarChart: typeof BarChart;
     readonly LineChart: typeof LineChart;
+    readonly ScatterChart: typeof ScatterChart;
     readonly BubbleChart: typeof BubbleChart;
     readonly ArcChart: typeof ArcChart;
     readonly DoughnutChart: typeof DoughnutChart;
@@ -3617,6 +3970,7 @@ declare const T$: {
     readonly CartesianChartWrapper: typeof CartesianChart;
     readonly BarChartWrapper: typeof BarChart;
     readonly LineChartWrapper: typeof LineChart;
+    readonly ScatterChartWrapper: typeof ScatterChart;
     readonly BubbleChartWrapper: typeof BubbleChart;
     readonly ArcChartWrapper: typeof ArcChart;
     readonly DoughnutChartWrapper: typeof DoughnutChart;
@@ -3630,5 +3984,5 @@ declare const T$: {
     };
 };
 
-export { ArcChart, ArcChart as ArcChartWrapper, BarChart, BarChart as BarChartWrapper, BubbleChart, BubbleChart as BubbleChartWrapper, CartesianChart, CartesianChart as CartesianChartWrapper, Chart, ChartFactory, ChartInstance, ChartToolBox, ChartTypes, Chart as ChartWrapper, CreateZoomRangeSlider, DefaultArcRadius, DefaultDataLabelsOptions, DefaultHiddenLegendTopOptions, DefaultHiddenSparkScales, DefaultResponsiveChartOptions, DefaultSparkPluginOptions, DefaultTimeScaleOptions, DefaultTopLegendOptions, DefaultZoomOptions, DoughnutChart, DoughnutChart as DoughnutChartWrapper, LineChart, LineChart as LineChartWrapper, PieChart, PieChart as PieChartWrapper, T$, TreemapChart, TreemapChart as TreemapChartWrapper, barScaleImgPlugin, blinkPlugin, changeSetting, chartMountPlugin, clearChartActiveElements, createAssignedTasksPlugin, createDefaultBarOptions, createDefaultBubbleOptions, createDefaultCartesianScales, createDefaultDoughnutOptions, createDefaultLineOptions, createDefaultPieOptions, createDefaultTreemapOptions, createStatusPlugin, createTodayLinePlugin, createWeekendPlugin, customDatasetPlugins, customLegend, T$ as default, defaultBarScales, defaultBarTooltipCallback, defaultBubbleScales, defaultBubbleTooltipCallback, defaultDoughnutTooltipCallback, defaultLineScales, defaultLineTooltipCallback, defaultPieTooltipCallback, defaultTreemapTooltipCallback, doughnutCenterTextPlugin, downloadChartAsImage, downloadChartAsImageByInstance, getChartAsBase64, getChartAsBase64ByInstance, getChartAsBlob, getChartAsBlobByInstance, getChartDatasetMeta, getChartInstance, hideChartTooltip, isChartDatasetVisible, loadingPlugin, makeCenterHtml, mountChart, noDataPlugin, resetChartZoom, resizeChart, segmentImagePlugin, setChartActiveElements, setChartConfig, setChartDatasetVisibility, showChartTooltip, sparkBarOptions, sparkBubbleOptions, sparkLineOptions, toggleChartDatasetVisibility, updateChart, zoomRangeSlider, zoomResetPlugin };
-export type { Align, AllChartTypes, ArcChartBuilder, ArcChartType, ArcDataset, AutoZoomLimitMode, AutoZoomLimits, AxisColors, BarChartBuilder, BubbleChartBuilder, CartesianChartBuilder, CartesianChartType, CartesianDataset, ChartBuilder, ChartImageExportOptions, ChartTarget, ChartWithFocus, Color, CommonAxes, CommonAxesSacels, CommonCartesian, CommonCartesianAxes, CommonCartesianLegendConfig, CommonCartesianTicks, CommonCartesianTitleConfig, CommonTicks, Constructor, CustomArcChartOptions, CustomBarChartOptions, CustomBubbleChartOptions, CustomCartesianDataset, CustomChartDatasets, CustomChartOptions, CustomDoughnutChartOptions, CustomLineChartOptions, CustomOptionPlugins, CustomPieChartOptions, CustomTreemapChartOptions, CustomTreemapDataset, CustomZoomType, DataLabels, DataLabelsContext, DatasetWithPrevColors, DeepPartial, DeepPartialCartesianAxes, DeepPartialPluginOptions, DeepPartialZoomType, DoughnutChartBuilder, FocusCallback, HierarchicalChartType, HtmlLegendOptions, LineChartBuilder, Mode, MountChartHandle, OriginalColors, Override, PartialDataLabels, PieChartBuilder, Position, RadarChartBuilder, RadialChartType, ScaleWithOriginalColors, SegmentImageConfig, SettingOptions, SpinnerOverlayConfig, SpinnerOverlayOption, SpinnerOverlayRenderContext, SpinnerOverlaySpinnerContent, SpinnerOverlayStyle, StzConfig, TimeScaleConfig, TimeScaleType, TimeUnit, TreemapChartBuilder, UidImageMapping, ZoomLimitOptions, ZoomRangeSliderColors, ZoomRangeSliderPlugin, ZoomRangeSliderVar, ZoomScaleLimits };
+export { ArcChart, ArcChart as ArcChartWrapper, BarChart, BarChart as BarChartWrapper, BubbleChart, BubbleChart as BubbleChartWrapper, CartesianChart, CartesianChart as CartesianChartWrapper, Chart, ChartFactory, ChartInstance, ChartToolBox, ChartTypes, Chart as ChartWrapper, CreateZoomRangeSlider, DefaultArcRadius, DefaultDataLabelsOptions, DefaultHiddenLegendTopOptions, DefaultHiddenSparkScales, DefaultResponsiveChartOptions, DefaultSparkPluginOptions, DefaultTimeScaleOptions, DefaultTopLegendOptions, DefaultZoomOptions, DoughnutChart, DoughnutChart as DoughnutChartWrapper, LineChart, LineChart as LineChartWrapper, PieChart, PieChart as PieChartWrapper, ScatterChart, ScatterChart as ScatterChartWrapper, T$, TreemapChart, TreemapChart as TreemapChartWrapper, barScaleImgPlugin, blinkPlugin, changeSetting, chartMountPlugin, clearChartActiveElements, createAssignedTasksPlugin, createDefaultBarOptions, createDefaultBubbleOptions, createDefaultCartesianScales, createDefaultDoughnutOptions, createDefaultLineOptions, createDefaultPieOptions, createDefaultScatterOptions, createDefaultTreemapOptions, createScatterCrosshairPlugin, createScatterQuadrantPlugin, createScatterTrendLinePlugin, createStatusPlugin, createTodayLinePlugin, createWeekendPlugin, customDatasetPlugins, customLegend, T$ as default, defaultBarScales, defaultBarTooltipCallback, defaultBubbleScales, defaultBubbleTooltipCallback, defaultDoughnutTooltipCallback, defaultLineScales, defaultLineTooltipCallback, defaultPieTooltipCallback, defaultScatterScales, defaultScatterTooltipCallback, defaultTreemapTooltipCallback, doughnutCenterTextPlugin, downloadChartAsImage, downloadChartAsImageByInstance, getChartAsBase64, getChartAsBase64ByInstance, getChartAsBlob, getChartAsBlobByInstance, getChartDatasetMeta, getChartInstance, hideChartTooltip, isChartDatasetVisible, loadingPlugin, makeCenterHtml, mountChart, noDataPlugin, resetChartZoom, resizeChart, segmentImagePlugin, setChartActiveElements, setChartConfig, setChartDatasetVisibility, showChartTooltip, sparkBarOptions, sparkBubbleOptions, sparkLineOptions, toggleChartDatasetVisibility, updateChart, zoomRangeSlider, zoomResetPlugin };
+export type { Align, AllChartTypes, ArcChartBuilder, ArcChartType, ArcDataset, AutoZoomLimitMode, AutoZoomLimits, AxisColors, BarChartBuilder, BubbleChartBuilder, CartesianChartBuilder, CartesianChartType, CartesianDataset, ChartBuilder, ChartImageExportOptions, ChartTarget, ChartWithFocus, Color, CommonAxes, CommonAxesSacels, CommonCartesian, CommonCartesianAxes, CommonCartesianLegendConfig, CommonCartesianTicks, CommonCartesianTitleConfig, CommonTicks, Constructor, CustomArcChartOptions, CustomBarChartOptions, CustomBubbleChartOptions, CustomCartesianDataset, CustomChartDatasets, CustomChartOptions, CustomDoughnutChartOptions, CustomLineChartOptions, CustomOptionPlugins, CustomPieChartOptions, CustomScatterChartOptions, CustomTreemapChartOptions, CustomTreemapDataset, CustomZoomType, DataLabels, DataLabelsContext, DatasetWithPrevColors, DeepPartial, DeepPartialCartesianAxes, DeepPartialPluginOptions, DeepPartialZoomType, DoughnutChartBuilder, FocusCallback, HierarchicalChartType, HtmlLegendOptions, LineChartBuilder, Mode, MountChartHandle, OriginalColors, Override, PartialDataLabels, PieChartBuilder, Position, RadarChartBuilder, RadialChartType, ScaleWithOriginalColors, ScatterAxisRangePadding, ScatterChartBuilder, ScatterCrosshairOptions, ScatterDataset, ScatterPointContext, ScatterPointHighlightStyle, ScatterQuadrantOptions, ScatterTrendLineOptions, SegmentImageConfig, SettingOptions, SpinnerOverlayConfig, SpinnerOverlayOption, SpinnerOverlayRenderContext, SpinnerOverlaySpinnerContent, SpinnerOverlayStyle, StzClickContext, StzClickHandler, StzClickItem, StzConfig, TimeScaleConfig, TimeScaleType, TimeUnit, TreemapChartBuilder, UidImageMapping, ZoomLimitOptions, ZoomRangeSliderColors, ZoomRangeSliderPlugin, ZoomRangeSliderVar, ZoomScaleLimits };