[React] apexcharts legend 범례 padding 조절하는 방법

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',
      horizontalAlign: 'center', 
      floating: false,
      fontSize: '14px',
      fontFamily: 'Helvetica, Arial',
      fontWeight: 400,
      formatter: undefined,
      inverseOrder: false,
      width: undefined,
      height: undefined,
      tooltipHoverFormatter: undefined,
      customLegendItems: [],
      offsetX: 0,
      offsetY: 0,
      labels: {
          colors: undefined,
          useSeriesColors: false
      },
      markers: {
          width: 12,
          height: 12,
          strokeWidth: 0,
          strokeColor: '#fff',
          fillColors: undefined,
          radius: 12,
          customHTML: undefined,
          onClick: undefined,
          offsetX: 0,
          offsetY: 0
      },
      itemMargin: {
          horizontal: 5,
          vertical: 0
      },
      onItemClick: {
          toggleDataSeries: true
      },
      onItemHover: {
          highlightDataSeries: true
      },
  }

 

Second try

개발자 도구 탭에서 legend element를 찾아봤는데요, 아래의 css가 적용되어 있었습니다. 

.apexcharts-legend {
    display: flex;
    overflow: auto;
    padding: 0 10px;
}

해당 부분을 활용하여 css 조절을 하려고 했는데, 잘 안되더라고요. 🥲 

 

How to solve the problem

그래서 첫번째 시도로 다시 돌아가서 legend 옵션을 자세히 살펴봤습니다. 

 

offsetX: Number

Sets the left offset for legend container

legend: {
    offsetX: 5,
},

설명을 보고, 적용이 될 것 같아서 혹시 몰라 위 옵션을 적용하여 코드를 실행해봤는데요, legend (범례)가 딱 제가 원하는 UI에 맞춰 잘 나오더라고요.

 

Conclusion

라이브러리에서 제공하는 옵션은 제대로 잘 살펴봐야 될 것 같습니다. 😂

 

---

https://apexcharts.com/docs/options/legend/