toast-chart(TUI-Chart) tooltip 서비스와 비슷 하게 구현

// tooltip 커스텀

const options = {
            tooltip: {
                template: (model, defaultTooltipTemplate, theme) => {
                  const { body, header } = defaultTooltipTemplate;
                  const { background } = theme;

                  let bHtml = '<div class="toastui-chart-tooltip-series-wrapper" style="font-weight: normal; font-family: Arial, sans-serif; font-size: 12px; color: #ffffff;">'

                  for(const data of model.data) {
                    if(data.value != 0) {
                        bHtml += '<div class="toastui-chart-tooltip-series">'
                                            bHtml += '  <span class="toastui-chart-series-name">'
                                            bHtml += '      <i class="toastui-chart-icon" style="background: ' +data.color+ '"></i>'
                                            bHtml += '      <span class="toastui-chart-name">' +data.label+ '</span>'
                                            bHtml += '      </span>'
                                            bHtml += '      <span class="toastui-chart-series-value">' +data.value+ '</span>'
                                            bHtml += '</div>'
                    }
                  }

                  bHtml += '</div>'
                  
                  return `
                    <div style="
                      background: ${background};
                      font-size: 10pt;
                      width: 160px;
                      padding: 10px 5px;
                      color: white;
                      border-radius: 8px;
                      ">
                        <p style="padding-left:10px;font-weight: bold; font-size:9pt;">${model.category}</p>
                        <p style="margin-top:10px;border-top: 1px solid #575757">` + bHtml +`</p>
                      </div>`;
                }
              }
        };

 

// tooltip 위치 변경

tooltip: {
            template: (model, { body }) => {
                return `
                      <div style="display: flex; flex-direction: column; background: black; color: #fff;">
                        ${body}
                      </div>`;
            },
            offsetX : (((data.series[0].data + data.series[1].data) < 60)? -80 : ((data.series[0].data < 50)? -70 : -130)),
            offsetY : (((data.series[0].data + data.series[1].data) < 60)? -85 : ((data.series[0].data < 50)? -50 : -30))
        },