legend
차트 시리즈 구성 등을 직관적으로 이해할 수 있도록 도와주는 범례 설정 옵션.
시리즈나 데이터포인트 등의 이름과 심볼을 같이 표시할 수 있다.
visible
기본값이 undefined이고,
따로 지정하지 않으면 시리즈가 둘 이상 포함돼야 legend가 표시된다.
범례 개요
페이지를 참조한다.
Class selectors
- 'rct-legend' legend 기본 class.
Options
align: 'center'|'left'|'right'
수평 배치.
값을 지정하지 않으면, 기본값이 location
이 'body'일 때는 'left',
'left', 'right'일 때는 'center'이다.
'center'
영역 가운데로 정렬한다.'left'
왼쪽으로 정렬한다.'right'
오른쪽으로 정렬한다.
alignBase: 'body'|'chart'|'parent'
legend 정렬 기준.
'body'
'chart'
'parent'
상위 모델이 존재하는 경우 상위 모델 영역 기준. 상위가 없으면 기본값(대부분 'body')과 동일. ex) subtitle인 경우 title 기준.
default :'body'
backgroundStyle: SVGStyles
|string
배경 스타일 셋.
배경 색상 및 경계선 스타일을 지정할 수 있다.
gap: number
location
이 'body'가 아닐 때,
legend view와 나머지 chart 영역 사이의 gap.
default :6(픽셀)
itemGap: number
legend 아이템들 사이의 간격.
default :8(픽셀)
itemsAlign: 'center'|'end'|'start'
한 라인의 item들이 배치되는 위치.
'center'
center: 수평 혹은 수직의 중앙으로 몰아서 배치한다.'end'
end: 수평일 때 오른쪽, 수직일 때는 아래쪽으로 몰아서 배치한다.'start'
수평일 때 왼쪽, 수직일 때는 위쪽으로 몰아서 배치한다.
default :'center'
itemsPerLine: number
한 줄 당 표시할 최대 legend 항목 수.
layout: 'auto'|'horizontal'|'vertical'
item 배치 방향.
'auto'
legend가 차트 좌우에 배치되면 item들을 수직으로 배치하고, legend가 차트 상하에 배치되면 item들을 수평으로 배치한다.'horizontal'
item들을 수평으로 배치한다.'vertical'
item들을 수직으로 배치한다.
default :'auto'
lineGap: number
라인 사이의 간격.
default :4(픽셀).
location: 'body'|'bottom'|'left'|'right'|'top'
표시 위치.
'body'
차트 본체 영역 내부에 표시한다.'bottom'
차트 본체 아래 표시한다.'left'
차트 본체 왼쪽에 표시한다.'right'
차트 본체 오른쪽에 표시한다.'top'
차트 타이틀 아래 표시한다.
default :'bottom'
markerGap: number
marker와 text사이의 간격.
default :4(픽셀).
markerSize: number
marker 크기.
default :10(픽셀).
markerVisible: boolean
marker 표시 여부.
default :true
maxHeight: string
|number
수직 배치
일 때,
최대 높이를 픽셀 단위의 크기 혹은 body 높이에 대한 상대 길이를 '%'로 지정한다.
maxWidth: string
|number
수평 배치
일 때,
최대 너비를 픽셀 단위의 크기 혹은 body 너비에 대한 상대 길이를 '%'로 지정한다.
offsetX: number
범례와 body 혹은 차트 경계 사이의 수평 간격.
default :0
offsetY: number
범례와 body 혹은 차트 경계 사이의 수직 간격.
default :0
pointHovering: boolean
데이터포인트 연결된 범례 아이템에 마우스가 올라가면 시리즈의 나머지 데이터포인트들을 반투명 처리해서
연결된 데이터포인트를 강조한다.
default :true
reversed: boolean
true면 나중에 배치되는 시리즈가 먼저 표시된다.
seriesHovering: boolean
시리즈가 연결된 범례 아이템에 마우스가 올라가면 나머지 시리즈들을 반투명 처리해서
연결된 시리즈를 강조한다.
default :true
style: SVGStyles
|string
스타일셋
또는 css selector
(opens in a new tab).
useTextColor: boolean
범례 항목의 텍스트에도 marker와 동일한 색상을 적용한다.
verticalAlign: 'bottom'|'middle'|'top'
수직 배치.
값을 지정하지 않으면, 기본값이 location
이 'body'일 때는 'top',
'top', 'bottom'일 때는 'middle'이다.
'bottom'
'middle'
'top'
visible: boolean
명시적 true로 지정하고 항목이 하나라도 존재하거나,
명시적 false가 아닌 경우 항목이 둘 이상이면 표시된다.
default :undefined