JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.53.0/apexcharts.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.53.0/apexcharts.min.css">

<div id="chart"></div>

CSS

.apexcharts-tooltip-series-group:has(.apexcharts-tooltip-text-y-value:empty) {
   display: none !important;
}

JavaScript

const seriesData = [ 1, 1, -1, 0, 1, -1, 0, -1, -1, -1 ];
const matchNames = Array.from('ABCDEFGHIJ', n => n.repeat(3));
const labels = [ '10.01', '14.01', '28.01', '07.02', '21.02', '01.03', '15.03', '17.03', '24.03', '04.04' ];

const colors = [ '#28a745', '#6c757d', '#dc3545' ];
const results = [ 'Поражение', 'Ничья', 'Победа' ];

const series = seriesData.reduce((acc, val) => (
  acc.forEach((n, i) => n.data.push(val === ~-i ? val : null)),
  acc
), results.map((n, i) => ({ data: [], name: n, color: colors[i] })));

const options = {
  chart: {
    type: 'line',
    height: 300,
  },
  series,
  labels,
  yaxis: {
    min: -1,
    max: 1,
    tickAmount: 2,
    labels: {
      formatter: val => results[-~val],
    },
  },
  tooltip: {
    followCursor: true,
    y: {
      title: {
        formatter: () => '',
      },
      formatter: (val, { dataPointIndex }) => val === null
        ? ''
        : `<div>${matchNames[dataPointIndex]}<br>Результат матча: ${results[-~val]}</div>`,
    },
  },
  stroke: {
    width: 3,
  },
  markers: {
    size: 5,
    hover: {
      size: 7,
    },
  },
};

new ApexCharts(document.querySelector('#chart'), options).render();