Как мне создать индивидуальные всплывающие подсказки в линейной диаграмме вершинных диаграмм в реакции?

Question

Я показываю баланс банковского счета с течением времени. Моя цель - получить отдельные подсказки, которые показывают баланс И транзакцию, в которой изменение баланса соответствует .

. Я знаю, что могу отформатировать значение Y с помощью средства форматирования, но после поиска Несколько часов я не могу найти способ добавить данные к каждой подсказке. Например, первая подсказка может изменить баланс с 100 на 50, во всплывающей подсказке будет указано «оплата кредитной картой», следующая подсказка может изменить баланс на 500, а в подсказке появится надпись «Paycheck». вот что я делаю в своих настройках:

series: [{
                name: 'Balance',
                data: [
                    {
                        x: new Date('2018-02-12').getTime(),
                        y: 76
                      }, {
                        x: new Date('2019-02-12').getTime(),
                        y: 100
                      },
                      {
                        x: new Date('2020-02-12').getTime(),
                        y: 200
                      }, {
                        x: new Date('2021-02-12').getTime(),
                        y: 300
                      },
                      {
                        x: new Date('2022-02-12').getTime(),
                        y: 150
                      }, {
                        x: new Date('2023-02-12').getTime(),
                        y: 22
                      }
                ]
              }],
              options: {
                chart: {
                  type: 'line',
                  stacked: false,
                  height: 380,
                  zoom: {
                    type: 'x',
                    enabled: true,
                    autoScaleYaxis: true
                  },
                  toolbar: {
                    autoSelected: 'zoom'
                  }
                },
                dataLabels: {
                  enabled: false
                },
                markers: {
                  size: 2,
                },
                title: {
                  text: 'Account balance over time',
                  align: 'left'
                },

                yaxis: {
                  labels: {
                    formatter: function (val) {
                      return val.balance;
                    },
                  },
                  title: {
                    text: 'Balance'
                  },
                },
                xaxis: {
                  type: 'datetime',
                },
                tooltip: {
                  shared: true,
                  y: {
                    formatter: function (val) {
                        return "$"+val;
                      }
                  }
                }
              },

Вот как выглядят подсказки сейчас:

выше слово «баланс» Мне бы хотелось сказать, что фактическая транзакция меняет баланс. Мне интересно, возможно ли это вообще с графиками вершин.