[Chartjs]-Chart.js label and value overlap issue

I don’t have perfect workaround for my question. But I have some custom tooltip as a fix.

tooltips: {
  enabled: false,
  custom: function (tooltipModel) {
    // Tooltip Element
    var tooltipEl = document.getElementById('chartjs-tooltip');
    // Create element on first render
    if (!tooltipEl) {
      tooltipEl = document.createElement('div');
      tooltipEl.id = 'chartjs-tooltip';
      tooltipEl.innerHTML = "<table></table>";
      document.body.appendChild(tooltipEl);
    }

    // Hide if no tooltip
    if (tooltipModel.opacity === 0) {
      tooltipEl.style.opacity = '0';
      return;
    }

    // Set caret Position
    tooltipEl.classList.remove('above', 'below', 'no-transform');
    if (tooltipModel.yAlign) {
      tooltipEl.classList.add(tooltipModel.yAlign);
    } else {
      tooltipEl.classList.add('no-transform');
    }

    // Set Text
    if (tooltipModel.body) {
      let dataPoints = tooltipModel.dataPoints || [];

      let index = dataPoints[0].index;

      var innerHtml = '<thead>';

      innerHtml += '<tr><th class="text-left">Data to show</th><th >';

      innerHtml += '</thead><tbody></tbody>';
      var tableRoot = tooltipEl.querySelector('table');
      tableRoot.innerHTML = innerHtml;
    }

    var position = this._chart.canvas.getBoundingClientRect();

    // Display, position
    tooltipEl.style.opacity = '1';
    tooltipEl.style.minWidth = position.width * 0.4 + 'px';
    let middle = (position.left + position.right) / 2;
    tooltipEl.style.left = middle + 'px';
    tooltipEl.style.top = position.top + pageYOffset - 35 + 'px';

  }
},

And my result