스타일링

축에 스타일링을 할 수 있는 여러 옵션들이 있습니다. grid lines 과 ticks를 제어하기 위한 설정이 있습니다.

그리드 선 설정

그리드 선 설정은 gridLines 키 안에 있는 스케일 설정 아래에 중첩됩니다. 축에 수직으로 있는 그리드 선의 옵션을 정의합니다.

이름	유형	기본 값	설명
`display`	`boolean`	`true`	false이면 이 축에 대한 그리드 선을 보여주지 않습니다.
`circular`	`boolean`	`false`	true이면 그리드 선은 원형입니다 (레이더 차트에서만 가능).
`color`	`Color\|Color[]`	`'rgba(0, 0, 0, 0.1)'`	그리드 선의 색상. 만약 배열로 지정된다면 첫번째 색상은 첫번째 그리드 선에 적용되고, 두번째는 두번째 그리드 선에 적용되는 식입니다.
`borderDash`	`number[]`	`[]`	그리드 선 대쉬의 길이와 공간. MDN을 확인해주세요.
`borderDashOffset`	`number`	`0.0`	선 대쉬에 대한 오프셋 Offset for line dashes. MDN을 확인해주세요.
`lineWidth`	`number\|number[]`	`1`	그리드 선의 선 두께.
`drawBorder`	`boolean`	`true`	true이면 축과 차트 영역 사이에 있는 가장자리에 테두리를 그립니다.
`drawOnChartArea`	`boolean`	`true`	true이면 축 선 안에 있는 차트 영역에 선을 그립니다. 여러 축과 어떤 그리드 선을 그려야할지 제어가 필요할 때 유용합니다.
`drawTicks`	`boolean`	`true`	true이면 차트 뒤에 축 안에 있는 눈금 뒤에 선을 그립니다.
`tickMarkLength`	`number`	`10`	그리드 선의 축 영역 안에 그려지는 픽셀단위의 길이.
`zeroLineWidth`	`number`	`1`	Stroke width of the grid line for the first index (index 0).
`zeroLineColor`	`Color`	`'rgba(0, 0, 0, 0.25)'`	첫번째 인덱스에 대한 그리드 선의 선 색상 (index 0).
`zeroLineBorderDash`	`number[]`	`[]`	첫번째 인덱스에 대한 그리드 선 대쉬의 길이와 공간 (index 0). MDN을 확인해주세요.
`zeroLineBorderDashOffset`	`number`	`0.0`	첫번째 인덱스에 대한 그리드 선 대쉬의 오프셋 (index 0). MDN을 확인해주세요.
`offsetGridLines`	`boolean`	`false`	true이면 그리드 선이 라벨 사이로 이동합니다. 기본적으로 막대 차트에선 `true` 로 설정되어 있습니다.
`z`	`number`	`0`	그리드 레이어의 z-index. <= 0 값은 데이터집합 아래에 그려지며, > 0 은 위에 그려집니다.

눈금 설정

눈금 설정은 ticks 키 안에 있는 스케일 설정 아래에 중첩됩니다. 축에 의해 생성된 눈금 마크의 옵션을 정의합니다.

이름	유형	기본 값	설명
`callback`	`function`		차트에 보여져야하는 눈금 값의 문자열 표현을 반환합니다. 콜백 참조.
`display`	`boolean`	`true`	true이면 눈금 라벨을 보여줍니다.
`fontColor`	`Color`	`'#666'`	눈금 라벨의 폰트 색상.
`fontFamily`	`string`	`"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"`	CSS 글꼴 모음 옵션을 따르는 눈금 라벨을 위한 글꼴 모음.
`fontSize`	`number`	`12`	눈금 라벨의 폰트 크기.
`fontStyle`	`string`	`'normal'`	CSS 글꼴 스타일 옵션을 따르는 눈금 라벨의 폰트 스타일 (i.e. normal, italic, oblique, initial, inherit).
`lineHeight`	`number\|string`	`1.2`	텍스트의 각 선의 높이 ( MDN 참조).
`reverse`	`boolean`	`false`	눈금 라벨의 반대 순서.
`minor`	`object`	`{}`	마이너 눈금 설정. 생략된 옵션은 위의 옵션에서 상속됩니다.
`major`	`object`	`{}`	메이저 눈금 설정. 생략된 옵션은 위의 옵션에서 상속됩니다.
`padding`	`number`	`0`	축에서 눈금 라벨의 오프셋을 설정
`z`	`number`	`0`	눈금 레이어의 z-index. 차트 영역에 눈금이 그려질 때 유용합니다. <= 0 값은 데이터집합 아래에 그려지며, > 0 은 위에 그려집니다.

마이너 눈금 설정

마이너 눈금 설정은 minor 키 안에 있는 눈금 설정 아래에 중첩됩니다. 축에 의해 생성된 마이너 눈금 마크에 대한 옵션을 정의합니다. 생락된 옵션은 ticks 설정으로 부터 상속됩니다.

이름	유형	기본 값	설명
`callback`	`function`		차트에 보여져야 하는 눈금 값의 문자열 표현을 반환합니다. 콜백 참조.
`fontColor`	`Color`	`'#666'`	눈금 라벨의 폰트 색상.
`fontFamily`	`string`	`"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"`	CSS 글꼴 모음을 따르는 눈금 라밸의 글꼴 모음.
`fontSize`	`number`	`12`	눈금 라벨의 폰트 크기.
`fontStyle`	`string`	`'normal'`	CSS 폰트 스타일 옵션을 따르는 눈금 라벨의 폰트 스타일 (i.e. normal, italic, oblique, initial, inherit).
`lineHeight`	`number\|string`	`1.2`	텍스트의 각 선의 높이 ( MDN 참조).

메이저 눈금 설정

메이저 눈금 설정은 major 키 안에 있는 눈금 설정 아래에 중첩됩니다. 축에 의해 생성된 메이저 눈금 마크에 대한 옵션을 정의합니다. 생략된 옵션은 ticks 설정으로 부터 상속됩니다. 이 옵션은 기본적으로 비활성화되어 있습니다.

이름	유형	기본 값	설명
`enabled`	`boolean`	`false`	true이면 메이저 눈금 옵션은 메이저 눈금을 보여주기 위해 사용됩니다.
`callback`	`function`		차트에 보여져야하는 눈금 값의 문자열 표현을 반환합니다. 콜백 참조.
`fontColor`	`Color`	`'#666'`	눈금 라벨의 폰트 색상.
`fontFamily`	`string`	`"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"`	CSS 글꼴 모음을 따르는 눈금 라밸의 글꼴 모음.
`fontSize`	`number`	`12`	눈금 라벨의 폰트 크기.
`fontStyle`	`string`	`'normal'`	CSS 폰트 스타일 옵션을 따르는 눈금 라벨의 폰트 스타일 (i.e. normal, italic, oblique, initial, inherit).
`lineHeight`	`number\|string`	`1.2`	텍스트의 각 선의 높이 ( MDN 참조).

results matching ""

No results matching ""