현인

echarts yAxis Label width 설정 본문

개발 일기

echarts yAxis Label width 설정

현인(Hyeon In) 2024. 11. 27. 15:32

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이라는 이름으로 정의했고, 본인이 원하는 이름으로 지정하면 된다.

반응형