[React] react-apexcharts y축 (yaxis) 단위 설정하는 방법

Intro

안녕하세요. 이번 시간에는 react-apexcharts 의 y축 단위를 설정하는 방법에 대해 알아보겠습니다. 

 

How to solve the problem

기존 chart options 코드는 다음과 같습니다. 저의 경우 y축이 화폐 단위였기 때문에 보기 쉽게 자릿수 표시가 필요했습니다. 

const options: any = {
    chart: {
        height: 250,
        type: 'bar',
        stacked: false,
        toolbar: false,
        animations: {
            enabled: true,
            easing: 'easeinout',
            speed: 500,
        },
        zoom: {
            enabled: false,
        },
    },
    ...
    yaxis: {
        axisBorder: {
            show: false,
        },
        axisTicks: {
            show: false,
        },
        labels: {
            show: true,
            rotate: 0,
            style: {
                colors: '#666',
                fontSize: '11rem',
                fontFamily: 'SpoqaHanSans, Helvetica, Arial, sans-serif',
            },
        },
    },
};

 

 

이를 위해 formatter이라는 속성을 활용하였습니다. 또한 toLocaleString 를 활용해 commas가 붙도록 추가해주었습니다. 아래의 코드 적용 시 y축(yaxis)이 자릿수 별로 잘 표시가 되었습니다. 

const options: any = {
    chart: {
        height: 250,
        type: 'bar',
        stacked: false,
        toolbar: false,
        animations: {
            enabled: true,
            easing: 'easeinout',
            speed: 500,
        },
        zoom: {
            enabled: false,
        },
    },
    ...
    yaxis: {
        axisBorder: {
            show: false,
        },
        axisTicks: {
            show: false,
        },
        labels: {
            show: true,
            rotate: 0,
            style: {
                colors: '#666',
                fontSize: '11rem',
                fontFamily: 'SpoqaHanSans, Helvetica, Arial, sans-serif',
            },
            formatter: (value: number) => {
                return value.toLocaleString(); 
            },
        },
    },
};

 

 

 

---

https://apexcharts.com/docs/formatting-axes-labels/