[React] 리액트 apexcharts x축(xaxis) 특정 값으로 시작하도록 설정하는 방법

Intro

안녕하세요. 이번 시간에는 리액트 apexcharts x축 값을 특정 값으로 시작하도록 설정하는 방법에 대해 알아보도록 하겠습니다. 

 

How to solve the problem

제 경우에는 새벽 5시라는 특정 값으로 x축을 시작하고 싶었습니다. 따라서 저는 apxechart xaxis의 min 속성을 사용해 제가 원하는 시간을 아래와 같이 설정해주었습니다.

 

x축 값은 상황에 따라 다를테니 년도/달/일 등이 필요하다면 커스텀하여 사용하면 됩니다. 

xaxis: {
    min: new Date(new Date().setHours(5, 0, 0, 0)).getTime(),
}

 

아래는 전체 코드입니다. 

var options = {
  chart: {
    type: 'line'
  },
  series: [{
    name: 'sales',
    data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
  }],
  xaxis: {
    type: 'datetime',
    min: new Date(new Date().setHours(5, 0, 0, 0)).getTime(),
    labels: {
      datetimeFormatter: {
        year: 'yyyy',
        month: 'MMM \'yy',
        day: 'dd MMM',
        hour: 'HH:mm',
        minute: 'HH:mm'
      }
    }
  }
}

var chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();

 

---

https://apexcharts.com/