초보프론트

안녕하세요 Chart.js 질문 하나 드리겠습니다. 저 화살표 부분에 마우스 호버시 도넛 가운데에 값을 넣고 싶은데 저 호버 되는 위치를 찾아 코드를 작성하였지만 값이 나와도 글자가 계속 깜빡 거립니다. 아래 코드를 작성 하였습니다. 문제점이 무엇인지 아시는분 계신가요? onHover: (event, activeElements, chart: Chart) => { const {ctx, chartArea: {top, right, bottom, left, width, height}} = chart; ctx.save(); ctx.fillStyle = &#39;#3983DC&#39;; ctx.textAlign = &#39;center&#39;; if (event.type !== &#39;mousemove&#39;) { soHover = true; } if (activeElements.length > 0) { ctx.font = &#39;10px arial, "Malgun Gothic", "맑은 고딕", AppleSDGothicNeo-Light, sans-serif&#39;; // eslint-disable-next-line @typescript-eslint/consistent-type-assertions ctx.fillText(<string>chart.data.labels[activeElements[0].index], width / 2, top + (height / 2.3)); if (activeElements[0].index === 0) { soHover = false; ctx.font = &#39;25px arial, "Malgun Gothic", "맑은 고딕", AppleSDGothicNeo-Light, sans-serif&#39;; ctx.fillText(&#39;&#39; + so.nCnt, width / 2, top + (height / 1.65)); } else if (activeElements[0].index === 1) { soHover = false; ctx.font = &#39;25px arial, "Malgun Gothic", "맑은 고딕", AppleSDGothicNeo-Light, sans-serif&#39;; ctx.fillText(&#39;&#39; + so.cCnt, width / 2, top + (height / 1.65)); } else if (activeElements[0].index === 2) { soHover = false; ctx.font = &#39;25px arial, "Malgun Gothic", "맑은 고딕", AppleSDGothicNeo-Light, sans-serif&#39;; ctx.fillText(&#39;&#39; + so.sCnt, width / 2, top + (height / 1.65)); } } else { soHover = true; } 혹시 다른 방법이 있나요?