highcharts 의 label style 변경

이러한 문제를 해결하고자 몇가지 편법을 사용하려고 합니다.

먼저 지난 시간에 사용했던 customized tooltip을 예제로 참고하여 확장해봅시다.
기존 customized tooltip 은 아래와 같습니다.

  this.chart = Highcharts.chart({
    ...
    tooltip: {
      enabled: false // disable the default one
    },
    plotOptions: {
      series: {
        point: {
          events: {
            click: (p: any) => {
              this.chart.renderer.label(
                'tooltip title', // title
                p.offsetX, // x position
                p.offsetY, // y position
              )
              .attr({
                  padding: 10,
                  r: 5,
                  fill: '#000',
                  zIndex: 5
              })
              .css({
                  color: 'white'
              })
              .add();
            },
          },
        }
      }
    },
  });

Set Attributes on Label at the Beginning

label에 style 넣으려면 html 형태의 데이터가 들어가야 합니다.
따라서 text를 html로 변경해야 합니다.

Set useHTML

또한, html을 사용가능 상태로 설정해야 합니다. 이 옵션은 renderer.label의 옵션에서 제공됩니다.

SVGRenderer.label(str: string, x: number, y?: number, shape?: string, anchorX?: number, anchorY?: number,
useHTML?: boolean, baseline?: boolean, className?: string): Highcharts.SVGElement

label 전체에 class를 적용하려면 className 옵션을 설정하고, label의 각 항목에 class 또는 style을 적용하려면 useHTML을 설정합니다.
여기에서는 useHTML을 활용해보겠습니다.

위의 예제를 다음과 같이 변경할 수 있습니다.

  ...
  this.chart.renderer.label(
    `<p>Title</p><button type="button" class="btn">Click to Confirm<button>`,
    p.offsetX, 
    p.offsetY, 
    null, null, null, true
  )
  ...

Store to the Variable

설정한 label을 변수에 저장해야 합니다.
변수에 저장하는 이유는 dom 의 접근 때문인데 이후에 다시 알아보도록 합시다.

let label =   
  this.chart.renderer.label(
    `<p>Title</p><button type="button" class="btn">Click to Confirm<button>`,
    p.offsetX, 
    p.offsetY, 
    null, null, null, true
  );

Set Event

만일 label에 event가 필요하다면 on 함수를 사용하여 정의할 수 있습니다.
만일, label을 click하였을 때 label의 class를 변경한다고 가정한다면, click event를 정의해야 합니다.

label을 click하면 class명을 추가하는 코드를 작성해 봅시다.

click event는 다음과 같이 설정할 수 있습니다.

label.on('click', (event: any) => {

});

이 때 주의해야할 점은 event가 target으로 삼는 dom은 {% raw %}{% endraw %} 라는 점입니다.
우리가 활용할 값은 바로 변수 label의 element 입니다. 이 값은 {% raw %}

label.on('click', (event: any) => {
  label.element.addClass('active'); // example of setting class to label
  label.element['div'].children[0].childNodes[0].style.color = 'red'; // example of setting firstNode style
});