라인 차트 옵션

가져오기

import type { LineChartOptions } from "@sixtyfold/line";

위에 표시된 공개 진입점을 사용하세요. 타입 전용 가져오기는 애플리케이션 JavaScript에서 제거됩니다.

`BandOptions`

범위/밴드별 시각 옵션

가져오기 @sixtyfold/line인터페이스

interface BandOptions

멤버	정의	설명
`borderColor?`	`string \| undefined`	상·하 경계의 공통 테두리 색(테두리가 활성화된 경우 기본값은 시리즈 색)
`borderStyle?`	`BandBorderStyle \| undefined` = `solid`	테두리 선 스타일
`borderWidth?`	`number \| undefined`	테두리 너비(픽셀). 0으로 설정하면 테두리를 비활성화합니다.
`fill?`	`number \| boolean \| undefined`	밴드 채우기. - false: 밴드 미채움 - true: 시리즈 색상으로 기본 불투명도로 채움 - 숫자(0-1): 지정한 불투명도로 시리즈 색상으로 채움
`fillColor?`	`string \| SeriesGradient \| undefined`	밴드 채우기 색상 — 단색 문자열 또는 그라디언트 객체. 지정된 경우 채우기 불투명도를 무시합니다
`lowerBorderColor?`	`string \| undefined`	하한 경계의 색상 재정의
`upperBorderColor?`	`string \| undefined`	상위 경계의 색을 재정의

`BarOptions`

막대/열별 시각 옵션

가져오기 @sixtyfold/line인터페이스

interface BarOptions

멤버	정의	설명
`baseline?`	`number \| undefined` = `0`	막대가 성장하는 데이터 값
`borderColor?`	`string \| undefined`	공유 막대 테두리 색(테두리가 활성화된 경우 기본값은 시리즈 색)
`borderStyle?`	`BarBorderStyle \| undefined` = `solid`	테두리 선 스타일
`borderWidth?`	`number \| undefined`	테두리 너비(픽셀). 0으로 설정하면 테두리 비활성화.
`fill?`	`number \| boolean \| undefined`	막대 채우기. - false: 채우지 않음 - true: 시리즈 색으로 기본 불투명도로 채움 - 숫자 (0-1): 지정한 불투명도로 시리즈 색으로 채움
`fillColor?`	`string \| SeriesGradient \| undefined`	막대 채우기 색상 - 단색 문자열 또는 그라데이션 객체. 지정된 경우 채우기 불투명도를 무시함
`maxWidth?`	`number \| undefined` = `24`	최대 막대 너비(픽셀)
`minWidth?`	`number \| undefined` = `1`	최소 막대 너비(픽셀)
`widthRatio?`	`number \| undefined` = `0.7`	사용 가능한 샘플 간격의 각 막대에 사용되는 비율

`LegendLabelFontOptions`

범례 레이블 글꼴 옵션.

가져오기 @sixtyfold/line인터페이스

interface LegendLabelFontOptions

멤버	정의	설명
`color?`	`string \| undefined` = `#cfd6e6`	글꼴 색상
`family?`	`string \| undefined` = `DEFAULT_CHART_FONT_FAMILY`	글꼴 계열
`size?`	`number \| undefined` = `12`	글꼴 크기(px)
`style?`	`"normal" \| "italic" \| "oblique" \| undefined` = `normal`	글꼴 스타일
`weight?`	`string \| number \| undefined` = `normal`	글꼴 두께
`width?`	`number \| undefined` = `auto`	레이블 최대 텍스트 너비(px)

`LegendOptions`

내장 Canvas2D 범례의 배치, 레이아웃, 타이포그래피, 스와치 및 상호작용.

가져오기 @sixtyfold/line인터페이스

interface LegendOptions

Member	Definition	Description
`align?`	`LegendAlign \| undefined` = `center`	범례 영역의 정렬
`allowHideAll?`	`boolean \| undefined` = `false`	모든 시리즈 숨기기 허용
`inactiveOpacity?`	`number \| undefined` = `0.45`	숨겨진 시리즈 범례 항목의 불투명도
`interactive?`	`boolean \| undefined` = `false`	클릭하여 토글 상호작용 활성화
`itemGap?`	`number \| undefined` = `12`	항목 간 간격(px)
`labelFont?`	`LegendLabelFontOptions \| undefined`	범례 레이블 글꼴 스타일
`layout?`	`LegendLayout \| undefined` = `column`	항목 레이아웃
`padding?`	`{ top?: number; right?: number; bottom?: number; left?: number; } \| undefined` = `8`	범례 영역 내부 패딩(px)
`position?`	`LegendPosition \| undefined` = `right`	차트 영역 주변의 범례 위치
`swatch?`	`LegendSwatchOptions \| undefined`	스와치 스타일 옵션
`swatchGap?`	`number \| undefined` = `6`	스와치와 레이블 간 간격(px)
`visible?`	`boolean \| undefined`	범례를 표시합니다. `legend`가 제공된 경우 기본값은 true이며; `legend`를 생략하면 비활성화됩니다.

`LegendSwatchOptions`

범례 견본(swatch)에 대한 옵션입니다.

Import @sixtyfold/lineinterface

interface LegendSwatchOptions

멤버	정의	설명
`borderColor?`	`string \| undefined` = `transparent`	스와치 테두리 색상
`borderWidth?`	`number \| undefined` = `0`	스와치 테두리 너비(px)
`shape?`	`LegendSwatchShape \| undefined` = `circle`	스와치 모양
`size?`	`number \| undefined` = `10`	스와치 크기(px)

`LineAppearanceOptions`

라인 차트 외형 — 기본 외형 + 범례 + 마커

Import @sixtyfold/lineinterface

interface LineAppearanceOptions extends BaseAppearanceOptions

멤버	정의	설명
`axis?`	`AxisAppearanceOptions \| undefined`	런타임 축 외형 옵션.
`chartBackground?`	`BackgroundOptions \| undefined`	차트 배경의 런타임 표시 옵션입니다.
`crosshairStyle?`	`CrosshairOptions \| undefined`	십자선 스타일의 런타임 표시 옵션입니다.
`grid?`	`GridOptions \| undefined`	그리드의 런타임 표시 옵션입니다.
`labels?`	`ChartLabels \| undefined`	레이블의 런타임 표시 옵션입니다.
`legend?`	`LegendOptions \| undefined`	범례의 런타임 표시 옵션.
`marker?`	`MarkerOptions \| undefined`	마커의 런타임 표시 옵션.
`overlay?`	`OverlayOptions \| undefined`	오버레이의 런타임 표시 옵션.
`padding?`	`PaddingOptions \| undefined`	패딩의 런타임 표시 옵션.
`rangeSelector?`	`RangeSelectorAppearanceOptions \| undefined`	범위 선택기의 런타임 표시 옵션입니다.
`selection?`	`SelectionOptions \| undefined`	선택 영역의 런타임 표시 옵션입니다.
`textDirection?`	`TextDirection \| undefined`	텍스트 방향의 런타임 표시 옵션입니다.
`tooltip?`	`TooltipOptions \| undefined`	툴팁의 런타임 표시 옵션입니다.

`LineChartOptions`

라인 차트의 구성, 상호작용, 외형, 시리즈 및 상세도 옵션.

Import @sixtyfold/lineinterface

interface LineChartOptions

멤버	정의	설명
`animated?`	`boolean \| undefined`	데이터 공개 및 뷰포트/축 전환을 애니메이션합니다. 생략하면 브라우저가 `prefers-reduced-motion: reduce`를 보고하지 않는 한 애니메이션이 활성화됩니다.
`axis?`	`AxisOptions \| undefined`	축 사용자화(선 색상 및 라벨 색상)
`chartBackground?`	`BackgroundOptions \| undefined` = `#16213e`	차트 배경(미리보기 영역을 포함한 전체 캔버스). 단색 문자열, 그라디언트 정의 또는 이미지가 될 수 있습니다.
`crosshairStyle?`	`CrosshairOptions \| undefined`	십자선 스타일링(수직 및 수평 가이드선)
`grid?`	`GridOptions \| undefined`	메인 차트 그리드 선 사용자화
`interactive?`	`boolean \| undefined` = `true`	사용자 상호작용(팬/줌/핀치)을 활성화합니다. false인 경우 차트는 보기 전용이지만 호버 시 크로스헤어/툴팁은 계속 표시됩니다.
`interpolation?`	`"none" \| "linear" \| "spline" \| undefined` = `linear`	데이터 점 사이 값의 보간 모드 - 'none': 보간 없음, 가장 가까운 데이터 점으로 스냅 - 'linear': 인접한 점들 간의 선형 보간 - 'spline': 부드러운 곡선을 위한 Catmull-Rom 스플라인 보간
`keepAliveInterval?`	`number \| undefined` = `0 (disabled)`	Safari가 GPU 리소스를 해제하지 못하도록 방지를 위한 유지 간격(초 단위). Safari는 "사용되지 않는" 캔버스를 적극적으로 정리하여 차트가 빈 화면으로 보일 수 있습니다.
`keyboardActivation?`	`"focus" \| "hover" \| undefined`	키보드 제어가 활성화되는 방식입니다. - "focus"(기본): 차트가 DOM 포커스를 가져야 함 - "hover": 마우스 포인터 아래의 차트가 키보드 내비게이션을 받음
`keyboardAnnouncements?`	`false \| KeyboardAnnouncementMessages \| undefined`	보조 기술용으로 키보드 동작 안내를 현지화하거나 비활성화하려면 `false` 로 설정하세요. 누락된 메시지는 간결한 영어 기본값을 사용합니다.
`keyboardPanSpeed?`	`number \| undefined` = `0.1 (10%)`	키보드 팬 속도(화살표 키). 키 입력당 이동할 표시 범위의 비율.1 (10%)
`keyboardZoomSpeed?`	`number \| undefined` = `0.1 (10% per keypress)`	키보드 줌 속도(+/- 키). 값이 클수록 더 빠른 줌입니다.1 (키 입력당 10%)
`labels?`	`ChartLabels \| undefined`	차트 주변의 텍스트 레이블(제목, 축 레이블)
`legend?`	`LegendOptions \| undefined`	시리즈 범례 옵션
`lod?`	`LineLODOptions \| undefined`	상세도 표시 정책.
`marker?`	`MarkerOptions \| undefined`	호버 포인트의 기본 마커 스타일(시리즈별로 재정의 가능)
`minViewportRange?`	`number \| undefined`	차트의 X 값과 동일한 단위로 표현된 가장 작은 상호작용 가능한 X 뷰포트 범위입니다. 유효하지 않거나 양수가 아닌 값은 차트 유형의 기본값을 유지합니다. 이 구성 옵션은 변경 가능한 외형의 일부가 아닙니다.
`overlay?`	`OverlayOptions \| undefined`	차트 콘텐츠 위에 렌더링되는 선언형 오버레이 프리미티브
`padding?`	`PaddingOptions \| undefined` = `{ top: 20, right: 80, bottom: 40, left: 80 }`	픽셀 단위의 사용자 정의 여백
`rangeSelector?`	`RangeSelectorOptions \| undefined`	범위 선택기(미리보기 차트) 구성
`rendererInitializationTimeout?`	`number \| undefined` = `15000`	렌더러 시작에 허용되는 최대 시간(밀리초). 워치독은 차트 구성 중에 시작되므로 `BaseChart.initialize`을 await하지 않는 애플리케이션도 보호합니다. 비활성화하려면 `0`로 설정하세요.
`renderMode?`	`"auto" \| "worker" \| "main" \| undefined`	렌더링 모드 선택. - "auto": 지원되는 경우 Worker+OffscreenCanvas를 선호함(기본값) - "worker": Worker 렌더링 강제(지원되지 않으면 메인으로 폴백) - "main": 브라우저 메인 스레드에서 렌더링(번들 DOM 필요; 폴백과 테스트에 유용)
`selection?`	`SelectionOptions \| undefined`	선택 범위(드래그로 줌) 스타일 지정
`series?`	`SeriesOptions[] \| undefined`	시리즈별 구성(색상, 채우기, 그라디언트)
`textDirection?`	`TextDirection \| undefined` = `inherit`	Canvas2D 텍스트에 사용되는 방향. 각 문자열의 첫 번째 강한 문자를 기반으로 추론하려면 "auto"를 사용하고, 차트 전체 방향을 강제하려면 "rtl"/"ltr"을 사용하세요.
`tooltip?`	`TooltipOptions \| undefined`	툴팁(십자선 정보 상자) 스타일링
`wheelZoomDirection?`	`"up-in" \| "up-out" \| undefined`	마우스 휠 줌 방향. - "up-in" (기본): 휠을 위로/뒤로 굴리면 확대, 아래로/앞으로 굴리면 축소 - "up-out": 휠을 위로/뒤로 굴리면 축소, 아래로/앞으로 굴리면 확대
`wheelZoomSpeed?`	`number \| undefined` = `0.1 (10% per wheel tick)`	마우스 휠 줌 속도. 값이 클수록 더 빠름.1 (휠 틱당 10%)
`yDomain?`	`YDomainOptions \| undefined`	렌더된 Y 영역의 한쪽 또는 양쪽 끝을 고정합니다. 생략된 끝은 보이는 데이터에 따라 자동으로 스케일링됩니다. 유한한 두 끝을 모두 제공하면 줌, 상세도(LOD) 선택 및 스트리밍 업데이트 동안 Y 뷰포트가 안정적으로 유지됩니다. 이 옵션은 기본적으로 비활성화되어 있으며 외형의 가변 속성이라기보다 구성 시점 설정입니다.

`LineChartStatsOptions`

라인 텔레메트리가 게시되는 빈도를 제어합니다.

가져오기 @sixtyfold/line인터페이스

interface LineChartStatsOptions

멤버	정의	설명
`intervalMs?`	`number \| undefined` = `250`	통계 업데이트 간의 최소 간격(밀리초)

`LineDataUpdateOptions`

대량 라인 데이터 교체에 사용되는 애니메이션 전환을 제어합니다.

가져오기 @sixtyfold/line인터페이스

interface LineDataUpdateOptions

멤버	정의	설명
`preservePreviousFrame?`	`boolean \| undefined`	애니메이션으로 교체되는 데이터셋이 그려지는 동안 공개 경계 앞에서 이전에 렌더링된 플롯을 계속 표시합니다. 기본값은 false입니다. 이 옵션을 사용하기 전에 이전 공개가 완료될 때까지 기다리십시오. 그렇지 않으면 부분적으로 공개된 프레임(빈 나머지를 포함)이 유지됩니다. 유지된 픽셀은 정적이므로 새 공개 중에 팬 또는 줌을 하면 전환이 완료될 때까지 임시 그리드/데이터 이음새가 생길 수 있습니다.

`LineLODOptions`

안정적인 화면 공간 표현 정책 및 충실도/부드러움 계수.

Import @sixtyfold/lineinterface

interface LineLODOptions

멤버	정의	설명
`density?`	`number \| undefined` = `0.75`	CSS 픽셀당 대상 표현 열 수 및 주요 충실도/작업 제어. 값이 클수록 로컬 세부 정보 유지가 더 잘되며 렌더링 작업이 증가합니다.
`mode?`	`"pyramid" \| "adaptive" \| undefined`	`adaptive`는 지원되는 경우 안정적인 뷰포트 인식 스크린 공간 표현을 사용합니다. `pyramid`는 사전 구축된 전역 LOD 레벨 중에서 선택합니다.
`quantizationStep?`	`number \| undefined` = `0.25`	이진 옥타브마다의 가법적 그리드 간격입니다. 값이 작을수록 더 촘촘한 그리드 폭이 가능해지고 더 높은 쿼리 비용으로 텍스처 점프가 감소합니다. 원활한 전환을 위해 유사한 리베이스 스케일(예: 0.1과 1.1–1.12)을 함께 사용하세요.
`rebaseRatio?`	`number \| undefined` = `1.25`	스티키 그리드가 리베이스되기 전의 최대 투영 열 너비 드리프트입니다. 하한은 그 역수입니다. 값이 낮을수록 더 작고 더 빈번한 표현 변경이 발생합니다.

`MarkerGlowOptions`

호버 마커에 대한 선택적 글로우 효과

가져오기 @sixtyfold/line인터페이스

interface MarkerGlowOptions

멤버	정의	설명
`blur?`	`number \| undefined` = `12`	글로우 블러 반경(픽셀 단위)
`color?`	`string \| undefined`	글로우 색상(기본값: 마커 채우기/시리즈 색상)
`opacity?`	`number \| undefined` = `0.45`	글로우 불투명도 0-1

`MarkerOptions`

호버 포인트 표시기용 마커 옵션

가져오기 @sixtyfold/line인터페이스

interface MarkerOptions

멤버	정의	설명
`borderColor?`	`string \| undefined` = `#fff`	테두리/스트로크 색상
`borderWidth?`	`number \| undefined` = `1`	테두리/스트로크 두께(픽셀)
`glow?`	`boolean \| MarkerGlowOptions \| undefined`	마커 주변의 선택적 글로우
`shape?`	`MarkerShape \| undefined` = `circle`	마커 모양
`size?`	`number \| undefined` = `5`	마커 크기(픽셀 단위) — 원의 반지름, 기타는 반너비

`PointOptions`

분산형/포인트 전용 시각 옵션

Import @sixtyfold/lineinterface

interface PointOptions

멤버	정의	설명
`borderColor?`	`string \| undefined` = `#fff`	점 경계/스트로크 색상
`borderWidth?`	`number \| undefined` = `0`	점 경계/스트로크 선폭(픽셀)
`color?`	`string \| undefined`	점 채우기 색상(기본값: 시리즈 색상)
`opacity?`	`number \| undefined` = `1`	점 불투명도 0-1
`shape?`	`MarkerShape \| undefined` = `circle`	점 모양
`size?`	`number \| undefined` = `3`	픽셀 단위의 점 크기 — 원의 반지름, 기타의 절반 너비

`SeriesAppearanceOptions`

시리즈별 표시 필드 — 시각적 및 프레젠테이션 전용

가져오기 @sixtyfold/line유형

type SeriesAppearanceOptions = Pick<SeriesOptions, "type" | "color" | "fill" | "fillColor" | "fillToZero" | "fillEffect" | "band" | "bar" | "stack" | "point" | "width" | "name" | "unit" | "marker">

멤버	정의	설명
`band?`	`BandOptions \| undefined`	범위/밴드별 채우기 및 테두리 스타일링
`bar?`	`BarOptions \| undefined`	막대/컬럼별 채우기, 테두리, 너비 및 기준선 스타일링
`color?`	`string \| undefined`	선 색(지정하지 않으면 기본 팔레트로 대체)
`fill?`	`number \| boolean \| undefined`	선 아래 영역을 채웁니다. - false: 채우지 않음(기본) - true: 선 색상으로 40% 불투명도로 채움 - 숫자(0-1): 지정한 불투명도로 선 색상으로 채움
`fillColor?`	`string \| SeriesGradient \| undefined`	채움 색상 — 단색 문자열 또는 그라디언트 객체. 지정된 경우 채움 불투명도를 대체합니다
`fillEffect?`	`"none" \| "glow" \| "layered" \| undefined`	채움 스타일 효과 - 'none': 평면 색상 채움(기본) - 'glow': 선에서 은은하게 퍼지는 글로우 - 'layered': 깊이감을 위한 불투명도 차이의 중첩된 채움
`fillToZero?`	`boolean \| undefined` = `true`	차트 하단 대신 영(0) 기준선까지 채움 true일 때: 양수는 아래로 0까지 채우고, 음수는 위로 0까지 채움 false일 때: 항상 차트 하단까지 채움
`marker?`	`MarkerOptions \| undefined`	이 시리즈의 호버 포인트에 대한 마커 스타일(차트 수준 마커를 재정의함)
`name?`	`string \| undefined`	범례 및 툴팁에 사용되는 시리즈 표시 이름.
`point?`	`PointOptions \| undefined`	산점도/포인트 전용 마커 스타일링
`stack?`	`StackOptions \| undefined`	누적 영역 전용 채우기 및 상단 경계 스타일링
`type?`	`LineSeriesType \| undefined` = `line`	시리즈 그리기 스타일. "step"은 "step-after"의 별칭이며; "band"는 "range"의 별칭이며; "points"는 "scatter"의 별칭이며; "column"은 "bar"의 별칭입니다; "stackedArea"는 "stacked-area"의 별칭입니다.
`unit?`	`UnitOptions \| undefined`	이 시리즈의 단위 구성(툴팁 및 축 레이블에 사용)
`width?`	`number \| undefined` = `1.5`	선 스트로크 너비(픽셀). 범위 채우기, 툴팁 및 기타 시리즈 레이어는 유지하면서 스트로크만 숨기려면 0으로 설정하세요.

`SeriesGradient`

시리즈 채우기를 위한 그라데이션 정의

가져오기 @sixtyfold/line인터페이스

interface SeriesGradient

멤버	정의	설명
`colors`	`string[]`	CSS 색상 스톱(최소 2개); 잘못된 색상은 건너뜁니다.
`direction?`	`"vertical" \| "horizontal" \| undefined` = `vertical`	그래디언트 방향
`offsets?`	`number[] \| undefined`	각 색상에 대한 선택적 오프셋 위치(0-1), 기본값은 균등 분포

`SeriesOptions`

단일 시리즈에 대한 구성

Import @sixtyfold/lineinterface

interface SeriesOptions

멤버	정의	설명
`band?`	`BandOptions \| undefined`	범위/밴드별 채우기 및 테두리 스타일 지정
`bar?`	`BarOptions \| undefined`	막대/열별 채우기, 테두리, 너비 및 기준선 스타일 지정
`color?`	`string \| undefined`	선 색상(지정되지 않으면 기본 팔레트로 대체)
`fill?`	`number \| boolean \| undefined`	선 아래 영역 채우기. - false: 채우지 않음(기본) - true: 선 색상으로 40% 불투명도로 채움 - 숫자(0-1): 지정한 불투명도로 선 색상 채움
`fillColor?`	`string \| SeriesGradient \| undefined`	채우기 색상 - 단색 문자열 또는 그라디언트 객체. 지정된 경우 채우기 불투명도를 무시합니다
`fillEffect?`	`"none" \| "glow" \| "layered" \| undefined`	채우기 스타일 효과 - 'none': 평면 색 채우기(기본) - 'glow': 선에서 퍼져나오는 부드러운 글로우 - 'layered': 다양한 불투명도의 중첩 채우기로 깊이 표현
`fillToZero?`	`boolean \| undefined` = `true`	0 기준선까지 채우기(차트 하단 대신) true일 때: 양수는 0까지 아래로 채우고 음수는 0까지 위로 채웁니다 false일 때: 항상 차트 하단까지 채웁니다
`marker?`	`MarkerOptions \| undefined`	이 시리즈의 호버 지점 마커 스타일(차트 수준 마커를 재정의)
`name?`	`string \| undefined`	시리즈 표시 이름(범례와 툴팁에 사용).
`point?`	`PointOptions \| undefined`	산점도/포인트 전용 마커 스타일링.
`stack?`	`StackOptions \| undefined`	누적 영역 전용 채우기 및 상단 경계 스타일링.
`type?`	`LineSeriesType \| undefined` = `line`	시리즈 그리기 스타일. "step"은 "step-after"의 별칭이고; "band"는 "range"의 별칭이며; "points"는 "scatter"의 별칭이고; "column"은 "bar"의 별칭이다; "stackedArea"은 "stacked-area"의 별칭이다.
`unit?`	`UnitOptions \| undefined`	이 계열의 단위 설정(툴팁 및 축 레이블에 사용)
`width?`	`number \| undefined` = `1.5`	선의 획 너비(픽셀). 획을 제거하되 범위 채우기, 툴팁 및 기타 계열 레이어는 유지하려면 0으로 설정하세요.

`StackOptions`

스택형 영역 전용 시각 옵션

가져오기 @sixtyfold/line인터페이스

interface StackOptions

멤버	정의	설명
`borderColor?`	`string \| undefined`	상단 경계 색상(기본값은 시리즈 색상)
`borderStyle?`	`StackBorderStyle \| undefined` = `solid`	상단 경계 선 스타일
`borderWidth?`	`number \| undefined`	상단 경계 두께(픽셀 단위, 기본값은 시리즈 두께). 0으로 설정하면 비활성화됩니다.
`curve?`	`StackCurveStyle \| undefined` = `linear`	채워진 밴드와 상단 테두리의 경계 모양.
`fill?`	`number \| boolean \| undefined`	누적 영역을 채웁니다. - false: 영역 채우기 없음 - true: 시리즈 색상으로 기본 불투명도로 채움 - 숫자 (0-1): 지정한 불투명도로 시리즈 색상으로 채움
`fillColor?`	`string \| SeriesGradient \| undefined`	영역 채우기 색상 - 단색 문자열 또는 그라데이션 객체. 지정된 경우 채우기 불투명도를 무시함