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>

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 options = {
  chart: {
    type: 'line',
    height: 300,
  },
  series: [ { data: seriesData } ],
  labels,
  yaxis: {
    min: -1,
    max: 1,
    tickAmount: 2,
    labels: {
      formatter: val => results[-~val],
    },
  },
  tooltip: {
    followCursor: true,
    custom: ({ series, seriesIndex, dataPointIndex }) => {
      const i = -~series[seriesIndex][dataPointIndex];
      return `
        <div class="apexcharts-tooltip-title">${labels[dataPointIndex]}</div>
        <div class="apexcharts-tooltip-series-group apexcharts-active" style="display: flex;">
          <span class="apexcharts-tooltip-marker" style="background-color: ${colors[i]}"></span>
          <div class="apexcharts-tooltip-text">
            <div class="apexcharts-tooltip-y-group">
              <span class="apexcharts-tooltip-text-y-label">${matchNames[dataPointIndex]}</span><br>
              <span class="apexcharts-tooltip-text-y-label">Результат матча:</span>
              <span class="apexcharts-tooltip-text-y-value">${results[i]}</span>
            </div>
          </div>
        </div>
      `;
    },
  },
  stroke: {
    curve: 'smooth',
    colors: [ '#ccc' ],
    width: 3,
  },
  markers: {
    hover: {
      size: 7,
    },
    discrete: seriesData.map((n, i) => ({
      seriesIndex: 0,
      dataPointIndex: i,
      fillColor: colors[-~n],
      strokeColor: colors[-~n],
      size: 5,
    })),
  },
};

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