Echart : all show label, setting interval

 데이터 시각화를 할 일이 많아서 주로 echart 라이브러리를 많이 사용하고 있는데, 세부적으로 계속 설정해 주어야 하는 부분들이 꽤 있어서 다루기가 번거롭다. 그때마다 공식 문서를 찾아보고는 하지만, 이해가 잘 안 될 때도 있는데 이번에도 문제에 봉착했다. echart는 편리하게 되어 있어서 글자가 겹칠 것 같으면 label을 띄워주지 않고 띄엄띄엄 보여주는데, 나는 모든 x축의 라벨 값을 보고 싶었다.

 

그래서 아래와 같이 참고하여 설정을 해주었다.

axisLabel: {
        width: 100, //fixed number of pixels
        overflow: 'truncate', // or 'break' to continue in a new line
        interval: 0,
      },

 

axisLabel 속성에 interval를 0으로 주면 보든 값을 생략 없이 보여준다. interval 속성이 간격을 나타내는 것이기 때문이다.

 

그런데 그렇게 해도, 그래프 가로폭의 크기가 작아지면 글씨가 겹치는 문제가 발생하였다. 이를 해결하고자, 4글자 이상이 넘어가면 줄바꿈을 해주도록 설정을 해줘야 했다. 그렇지만 echart 내장으로는 관련 함수가 없는 것으로 알고, 이를 해결하려면 아래와 같이 slice를 이용하여 문자열을 \n으로 먼저 줄바꿈으로 끊어준 다음 formatting을 하여 label 값에 넣어야 했다.

    xAxis: [
    {
       	type: 'category',
  		data: data.map((i) => {
			const labelText = [i.keyword.slice(0, 4), '\n', i.keyword.slice(4)].join('');
            return labelText;
        }),
    ]

 

이렇게 해서 아래와 같이 줄바꿈을 할 수 있었다.

참고글

ECharts: how to show all axis labels?