Chartjs-Chartjs, Bubble Chart, positioning problem with duplicate value in data labels

<canvas id="myChart"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  var ctx = document.getElementById("myChart");
  var options = {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      x: {
        offset: false,
        ticks: {
          callback: function(val) {
            return this.getLabelForValue(val).split('-')[0]
          }
        }
      }
    },
    plugins: {
      tooltip: {
        callbacks: {
          label: (ttItem) => {
            if (ttItem.dataset.type === "bubble") {
              return `${ttItem.label}: (${ttItem.raw.x.split('-')[0]},${ttItem.raw.y})`
            } else if (ttItem.dataset.type === "line") {
              return `${ttItem.dataset.label}: ${ttItem.parsed.y}`
            }
          },
          title: (ttItem) => (ttItem[0].label.split('-')[0])
        }
      }
    }
  };

  var mixedChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ["1-1", "2", "1-2", "4"], //Same Value on First and Third Position
      datasets: [
        //Lines
        {
          label: "First_Line",
          type: "line",
          borderColor: "#8e5ea2",
          data: [5, 10, 7, 12],
          fill: false
        }, {
          label: "Second_Line",
          type: "line",
          borderColor: "#3e95cd",
          data: [1, 4, 15, 6],
          fill: false
        },
        //Bubbles
        {
          label: "Bubble_One",
          type: "bubble",
          backgroundColor: "#8e5ea2",
          data: [{
            x: "2",
            y: 10,
            r: 15
          }],
        },
        {
          label: "Bubble_Two",
          type: "bubble",
          backgroundColor: "#3e95cd",
          backgroundColorHover: "#3e95cd",
          data: [{
            x: "1-2",
            y: 6,
            r: 15
          }] //First "1" or Second "1" possible?
        }
      ]
    },
    options: options
  });
</script>