Dev Diary 💻

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: ..

Intro 안녕하세요. 이번시간에는 리액트에서 apexcharts 를 이용하여 커스텀 툴팁을 만드는 방법에 대해 알아보도록 하겠습니다. How to solve the problem apexcharts 를 사용한다는 가정하에, 아래의 series 데이터와 chart option이 있다고 생각해봅시다. const series: any = [ { name: 'EBAY', data: [ ['2023-03-20T07:00:22.625Z', '123124.82'], ['2023-03-20T06:00:20.103Z', '52353.83'], ['2023-03-20T05:00:16.960Z', '98943.91'], ['2023-03-20T04:00:15.051Z', '796756.65'], ['2023-03-20T0..

Intro 안녕하세요. 이번 시간에는 apexcharts 에서 legend(범례) padding을 조절하는 방법에 대해 알아보겠습니다. 제 경우 아래의 차트 legend 범례가 기준 좌표에 비해 너무 왼쪽으로 치우쳐져 있어서 left-padding으로 해결하고 싶었습니다. First try 우선 저는apexchart lengend 의 속성에 padding 속성 유무가 있는지 검색해봤습니다. apexChart 내 legend 속성은 아래와 같습니다. padding 관련 속성이 없는 것 같았습니다. legend: { show: true, showForSingleSeries: false, showForNullSeries: true, showForZeroSeries: true, position: 'bottom'..

Intro 안녕하세요. 이번 시간에는 apexcharts 에서 yaxis y축을 0부터 시작하는 방법에 대해 알아보겠습니다. apexcharts를 이용해서 차트를 사용하여 작업하고 있었는데요, 차트의 y축값을 0으로 고정하고 싶은데, 계속 숫자 범위가 달라지면서 값이 변하더라고요. 그래서 구글링을 해봤습니다. How to solve the problem 아래와 같이 yaxis 속성에서 min을 0을 적용하면 y축 값이 0으로 고정되어 세팅됩니다. yaxis: { tickAmount: 3.5, min: 0, forceNiceScale: true, labels: { show: true, rotate: 0, style: { colors: '#828282', fontSize: '11rem', fontFamily..