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

스타일셋 혹은 class selector.

useTextColor: boolean

범례 항목의 텍스트에도 marker와 동일한 색상을 적용한다.

verticalAlign: 'bottom'|'middle'|'top'

수직 배치.
값을 지정하지 않으면, 기본값이 location이 'body'일 때는 'top', 'top', 'bottom'일 때는 'middle'이다.

• 'bottom'
• 'middle'
• 'top'

visible: boolean

명시적 true로 지정하고 항목이 하나라도 존재하거나, 명시적 false가 아닌 경우 항목이 둘 이상이면 표시된다.

Legend Visible

default :undefined