Highcharts - 시리즈를 토글해서 보여주기

요즘 하이차트를 사용하여 데이터를 시각화해서 보여주는 프론트 개발을 하고있다.
그중에 시리즈 2개를 동시에 보여주지 않고, 라디오 버튼처럼 하나씩만 노출되도록 해야하는 차트가 있었다.
api 공식문서와 구글링으로 여러 블로그를 보면서 해본 결과!! 아래의 방법으로 기능이 구현됐다.
나중에 써먹으려고 기록해둔다.

plotOptions: {
        series: {
          label: {
            connectorAllowed: false,
            enabled:false,
          },
          events: {
            legendItemClick : (event) => {
              const visibleArr = chart.series.map((item) => {
                return item.visible;
              });
              if(visibleArr.filter(item => item === false).length > 0 && event.target.visible) {
                return false;
              }
              if(event.target.index === 1) {
                chart.series[0].hide();
              } else {
                chart.series[1].hide();
              }
            }
          }
        }
      },

위의 legendItemClick (api문서 바로가기) 이라는 함수를 활용해서 기능을 구현했다.

첫번째 if문은, 하이차트의 기능 중 예를 들어 2개의 legend가 있으면 둘다 각자 개별적으로 보였다가 안보였다가 할 수 있는 기능을 막는 구문이다.
그렇게 한 이유는 2개의 시리즈를 둘다 꺼버린다면 차트가 하나도 안보이는 상황이 나오므로, 차트를 보여주는 의미가 없다고 생각해서 막았다.
그래서 최소 1개의 차트는 꼭 보이는 상황으로 작성했다.

그리고 두번째 if문은 라디오버튼처럼 표현하기 위해서 첫번째 레전드를 클릭하면 두번째차트가 숨겨지고, 두번째레전드를 클릭하면 첫번째 차트가 숨겨지도록 구현했다. 이때 하이차트 api중 hide() 를 사용했다. (api문서 바로가기)

그래서 최종적으로 구현된 차트는~!
1개씩만 토글되는 차트가 완성이 되었다!

앞으로 하이차트를 얼마나 쓸지는 모르겠지만 그래도 차트 라이브러리를 배워가는 소중한 경험이었다~