web

[ChartJS] xAxes축 labels rotation 설정하기 본문

API

[ChartJS] xAxes축 labels rotation 설정하기

사용자 원동호 2020. 11. 23. 14:16
728x90
반응형

ChartJS를 사용하면 X축 레이블 길이가 길 경우 아래 사진처럼 레이블이 rotation되버린다.

 

보기힘든 레이블..

 

ChartJS의 document를 보면 autoSkip이라는 설정에

 

"true 인 경우 표시 할 수있는 레이블 수를 자동으로 계산하고 그에 따라 레이블을 숨 깁니다."

 

라고 되어있는데 코드를 잘못 입력했는지 잘 되지 않아 다른 방법을 찾아보았다.

 

autoSkip을 false로 설정하고 max, min rotation을 0으로 설정하면 길이가 길어도 가로로 그려진다.

 

그리고 년월일 날짜가 길어 굳이 다 표현하는것보다 첫번째와 마지막 값만 그려주는게 나을것 같아 

 

이외의 값은 제거했다.

 

xAxes:[
		{
          ticks:{
          autoSkip : false,
          maxRotation :0,
          minRotation :0,
          },

          display: true,
          scaleLabel: {
          display: true,
          labelString: ''
          },

          afterTickToLabelConversion: function(data){
            let xLabels = data.ticks;
            for(let i = 0; i<xLabels.length;i++){
              if ( (i >= 1) && (i <= xLabels.length-2) )
                  xLabels[i] = '';
              else{
                  console.log(xLabels[i]);
              }
                  console.log(xLabels.length);
              }
         	} 
		}
      ],

 

이렇게 적용을 하고 난 후 의 사진이다.

 

 

정렬 후 사진..

훨씬 보기 편해진 모습이다.

 

출처

https://www.chartjs.org/docs/latest/axes/cartesian/?h=autoskip

 

Cartesian · Chart.js documentation

Cartesian Axes Axes that follow a cartesian grid are known as 'Cartesian Axes'. Cartesian axes are used for line, bar, and bubble charts. Four cartesian axes are included in Chart.js by default. Common Configuration All of the included cartesian axes suppo

www.chartjs.org

https://stackoverflow.com/questions/35022830/chart-js-change-label-orientation-on-x-axis-for-line-charts

 

Chart Js Change Label orientation on x-Axis for Line Charts

I am using chart.js. Similar to this Question, I would like to rotate my x-axis labels 90 degrees. Currently my labels are rotated about 80 degrees with default settings. Could somebody help me

stackoverflow.com

도움이 되셨다면 하트 및 댓글 부탁드립니다♥

728x90
반응형
0 Comments
댓글쓰기 폼