🎉 RealChart v1.4.2 is released. Read more →
API
API
Options
AxisLabelOptions

AxisLabelOptions extends IconedTextOptions

subinterfaces CategoryAxisLabelOptions, ContinuousAxisLabelOptions

축 label 설정 모델.

Options

autoArrange: 'none' | 'rotate' | 'rows' | 'step'

기본 설정이나 step, rows, rotation 속성들을 명시적으로 설정한 경우에도 label들이 본래 차지하는 공간을 초과할 때, label들을 재배치하는 방식을 지정한다.

  • 'none' label들이 겹치도록 놔둔다.
  • 'rotate' -45도 회전시킨다.
  • 'rows' label들이 겹치지 않도록 여러 줄로 나누어 배치한다.
  • 'step' label들이 겹치지 않도록 건너 뛰면서 배치한다. startStep으로 지정된 step부터 배치된다.

default :'rotate'

autoContrast: boolean (opens in a new tab)

텍스트가 data point 내부에 표시되는 경우 포인트 배경 색상과 대조되도록 표시한다.
밝게 표시할 때는 lightStyle을 적용하고, 어둡게 표시할 때는 darkStyle이 적용된다. lightStyle이 지정되지 않으면 'rct-text-light' 클래스 셀렉터가, darkStyle이 지정되지 않으면 'rct-text-dark' 클래스 셀렉터가 기본 적용된다.

default :true

backgroundStyle: SVGStyles | string (opens in a new tab)

effect가 'background'일 때 배경에 적용되는 스타일셋 또는 css selector (opens in a new tab).

default :undefined

backgroundStyleCallback: (args: AxisLabelArgs) => SVGStyles|string (opens in a new tab)

라벨 백그라운드의 동적 스타일 콜백.
이 콜백에서 리턴되는 스타일이 가장 우선적으로 적용된다.

default :undefined

darkStyle: SVGStyles | string (opens in a new tab)

autoContrast가 true이고 어둡게 표시할 때 적용되는 스타일셋 또는 css selector (opens in a new tab).

default :undefined

effect: 'background' | 'none' | 'outline'

텍스트 표시 효과.

  • 'background' 텍스트 배경 상자를 표시한다.
    배경 상자에 backgroundStyle이 적용된다. 스타일이 적용되지 않으면 기본 'rct-text-background'가 적용된다.
  • 'none' 효과 없음.
  • 'outline' 텍스트 색상과 대조되는 색상으로 텍스트 외곽을 구분 표시한다.

default :'none'

firstOverflow: 'hidden' | 'pull' | 'tick'

회전 없이 한 줄로 표시되는 첫번째 tick 라벨이 차트나 분할 경계를 넘어갈 때 표시 방식.

  • 'hidden' 넘치면 표시하지 않는다.
  • 'pull' 차트나 분할 경계를 넘어서는 경우 이웃 라벨과 겹치지 않을 만큼 최대한 끌어 당겨 표시한다.
    실제 표시 위치와 달라지므로 tick 선을 반드시 표시해서 사용자에게 오차를 보여줘야 한다.
  • 'tick' 원래 tick 위치에 그대로 표시한다.

default :'pull'

firstStyle: SVGStyles | string (opens in a new tab)

첫번째 tick 라벨에 추가로 적용되는 스타일.

default :undefined

firstText: string (opens in a new tab)

첫번째 tick 라벨에 표시될 텍스트.

default :undefined

iconGap: number (opens in a new tab)

아이콘과 텍스트 사이의 간격.

default :2

iconHeight: number (opens in a new tab)

아이콘 이미지 높이
지정하지 않으면 16 픽셀로 설정된다.

default :undefined

iconPosition: 'bottom' | 'default' | 'left' | 'right' | 'top'

이이콘 표시 위치

  • 'bottom'
  • 'default'
  • 'left'
  • 'right'
  • 'top'

default :'default'

iconRoot: string (opens in a new tab)

아이콘 이미지의 URL을 지정할 때 사용하는 기본 경로를 설정
아이콘 URL을 구성하는 데 필요한 루트 경로를 제공하며, 여러 아이콘의 상대 경로를 설정할 때 유용하다.

default :undefined

iconWidth: number (opens in a new tab)

아이콘 이미지 너비.

default :undefined

imageList: string (opens in a new tab)

아이콘에 사용할 이미지 목록
assets에 지정한 이미지 목록을 id 값으로 불러와 사용한다.
이미지 목록이 없으면, 대신 iconRoot 속성 값을 사용하여 아이콘 경로를 설정한다.

default :undefined

lastOverflow: 'hidden' | 'pull' | 'tick'

회전 없이 한 줄로 표시되는 마지막 tick 라벨이 차트나 분할 경계를 넘어갈 때 표시 방식.

  • 'hidden' 넘치면 표시하지 않는다.
  • 'pull' 차트나 분할 경계를 넘어서는 경우 이웃 라벨과 겹치지 않을 만큼 최대한 끌어 당겨 표시한다.
    실제 표시 위치와 달라지므로 tick 선을 반드시 표시해서 사용자에게 오차를 보여줘야 한다.
  • 'tick' 원래 tick 위치에 그대로 표시한다.

default :'pull'

lastStyle: SVGStyles | string (opens in a new tab)

마지막 tick 라벨에 추가로 적용되는 스타일.

default :undefined

lastText: string (opens in a new tab)

마지막 tick 라벨에 표시될 텍스트.

default :undefined

lightStyle: SVGStyles | string (opens in a new tab)

autoContrast가 true이고 밝게 표시할 때 적용되는 스타일셋 또는 css selector (opens in a new tab).

default :undefined

lineHeight: number (opens in a new tab)

텍스트 행의 높이를 계산되는 높이와 다르게 표시되도록 지정한다.
1이면 계산된 높이와 동일하게 표시된다. 지정하지 않으면 계산된 값.

default :undefined

location: 'default' | 'inside'

축 label 표시 위치.

  • 'default'
  • 'inside'

default :undefined

maxRows: number (opens in a new tab)

autoArrange ROWS로 자동 정렬되는 경우 최대 행 수.
이 행 수 이상이 필요한 경우 label 간격을 두어 표시한다.

default :3

numberFormat: string (opens in a new tab)

label이 숫자일 때 표시 형식.

default :'#,##0.#'

numberSymbols: string (opens in a new tab)

축의 tick 간격이 1000 이상인 큰 수를 표시할 때 이 속성에 지정한 symbol을 이용해서 축약형으로 표시한다.

default :'k,M,G,T,P,E'

outlineThickness: number (opens in a new tab)

effect가 'outline'일 때 외곽 택스트의 외곽선 두께.

default :2

overflow: 'clip' | 'ellipsis' | 'wrap'

  • 'clip'
  • 'ellipsis'
  • 'wrap'

default :clip

overflowGap: number (opens in a new tab)

차트나 분할 경계를 넘어가는 첫번째나 마지막 tick 라벨을 끌어 당겨서 표시할 때 이전 라벨과의 최소 간격.
이 간격보다 작게 되면 표시하지 않는다.

default :2

prefix: string (opens in a new tab)

label 문자열 앞에 추가되는 문자열.

default :undefined

rotation: number (opens in a new tab) | 'auto'

polar가 아닌 수평 축일 때, tick label 표시 회전 각도.
-90 ~ 90 사이의 각도로 지정할 수 있다.
**'auto'**이면 polar일때는 label위치에 따라 각도가 자동으로 계산되고, polar가 아닐때는 AxisLabelArrange속성에 따라 결정된다.

default :undefined

rows: number (opens in a new tab)

수평 축일 때 tick label 배치 행 수.
1은 한 줄, 2면 두 줄 등으로 여러 줄로 나눠서 표시한다.

default :0

startStep: number (opens in a new tab)

step이 2 이상이 될 때, 표시가 시작되는 label 위치.
0 ~ (step - 1) 사이의 값으로 지정한다. 'category' 축에서 의미있게 사용할 수 있다.

default :0

step: number (opens in a new tab)

label 표시 간격.
1이면 모든 tick 표시. 2이면 하나씩 건너 띄어서 표시. 2 이상일 때 startStep으로 지정된 step부터 배치된다.

const config = {
  xAxis: {
      type: "linear",
      tick: {
          stepInterval: 1
      },
      label: {
          startStep: 1,
          step: 2,
      }
  },
  series: [
      {
         data: [1, 2, 3, 4],
      },
  ],
};

default :0

style: SVGStyles | string (opens in a new tab)

스타일셋 또는 css selector (opens in a new tab).

default :undefined

styleCallback: (args: AxisLabelArgs) => SVGStyles|string (opens in a new tab)

라벨 별로 추가 적용되는 스타일을 리턴한다.
기본 설정을 따르게 하고 싶으면 undefined나 null을 리턴한다.

default :undefined

suffix: string (opens in a new tab)

label 문자열 끝에 추가되는 문자열.

default :undefined

text: string (opens in a new tab)

Text 형식.

default :undefined

textCallback: (args: AxisLabelArgs) => string (opens in a new tab)

축 tick 라벨에 표시될 텍스트를 리턴한다.
undefined나 null을 리턴하면 text 속성 등에 설정된 값으로 표시하거나, 값에 따라 자동 생성되는 텍스트를 사용한다. 빈 문자열 등 정상적인 문자열을 리턴하면 그 문자열대로 표시된다. prefix나 포맷 속성 등은 적용되지 않는다.

default :undefined

visible: boolean (opens in a new tab)

표시 여부.

default :true

AxisItemOptionsAxisLineGuideOptions