如何在React的顶点图表折线图中创建单个自定义工具提示？

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;
                      }
                  }
                }
              },

这是现在的工具提示：

在“余额”一词上方，我喜欢说改变余额的实际交易。我想知道顶点图表是否有可能。