[javascript] ApexCharts에서 차트에 로그 축 설정하기

30 Nov 2023

javascript

ApexCharts에서 차트에 로그 축을 설정하려면 yaxis 객체의 type 속성을 "logarithmic"으로 설정하면 됩니다. 아래 예제 코드를 살펴봅시다.

var options = {
  chart: {
    height: 350,
    type: 'line',
  },
  series: [{
    name: 'Series 1',
    data: [30, 20, 35, 45, 50, 55, 60, 70]
  }],
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']
  },
  yaxis: {
    type: 'logarithmic', // Logarithmic scale
    logarithmBase: 10, // Base of the logarithm (optional)
    labels: {
      formatter: function (value) {
        return Math.round(Math.log10(value) * 100) / 100; // Custom label format
      }
    }
  }
}

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

위 코드에서 yaxis 객체의 type 속성을 "logarithmic"으로 설정하면 차트의 y축이 로그 스케일로 지정됩니다. logarithmBase 속성은 로그의 기준이 되는 값을 설정하는 옵션으로, 생략 시 기본값은 10입니다. 라벨을 커스터마이즈 하기 위해 labels 객체의 formatter 함수를 사용할 수도 있습니다.

이제 위의 코드를 사용하여 ApexCharts에서 로그 축을 가진 차트를 생성할 수 있습니다. 더 자세한 설정 및 사용 방법은 ApexCharts 공식 문서를 참조하시기 바랍니다.

참고 문서:

ApexCharts 공식 문서: https://apexcharts.com/
ApexCharts 로그 축 설정 문서: https://apexcharts.com/docs/options/yaxis/#logarithmic