현인
echarts yAxis Label width 설정 본문
echarts 사용 중에 yAxis 라벨 width 설정이 잘 안되어 애를 먹었다. 기본적으로 axisLabel 속성 내부에 width 속성이 있는데, 해당 속성으로는 동작하지 않아서 찾아보게 되었고 아래와 같이 rich 속성 내부에 커스텀 스타일을 정의하고 사용해야 반영되었다.
...
yAxis: {
axisLabel: {
padding: [0, 22, 0, 0],
fontSize: 30,
lineHeight: 35.8,
fontWeight: 400,
align: 'right',
color: '#6E758F',
// width: 80
// width 옵션이 axisLabel에 있긴 하지만 어째서인지 넣어도 동작 안한다.
// 아래처럼 rich 속성에서 스타일 정의해야 동작했다.
rich: {
labelStyle: {
width: 80,
},
},
formatter: '{labelStyle|{value}}',
},
},
...
필자는 labelStyle이라는 이름으로 정의했고, 본인이 원하는 이름으로 지정하면 된다.
반응형
'개발 일기' 카테고리의 다른 글
Github release tag 자동화 스크립트 (0) | 2024.11.28 |
---|---|
npm error code EUNSUPPORTEDPROTOCOL; npm error Unsupported URL Type "link:": link:dummy.js (1) | 2024.11.15 |
[React] 텍스트 개행 처리 (0) | 2023.10.27 |
[TypeScript] 동적 키 타입 정의 (1) | 2023.10.25 |
[Javascript] Date.getHours 시간 안 맞는 문제 (1) | 2023.08.23 |