title: How do I create individual custom tooltips in an apex charts line chart in react?
body: <p>I'm displaying a balance of a bank account over time.  My goal is to have individual tool tips that show the balance <strong>AND the transaction that the balance change corresponds to</strong>.</p>
  
  <p>I know I can format the Y value with a formatter, but after looking for a few hours I can't find a way to add data to each tool tip.  For example the first tool tip might change the balance from 100 to 50, the tooltip would say 'credit card payment'  the next tool tip might change the balance to 500 and the tool tip would say 'Paycheck'.  here's what I'm doing in my options:</p>
  
  <pre><code>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;
                        }
                    }
                  }
                },
  </code></pre>
  
  <p>Here is what the tooltips look like now:  </p>
  
  <p><a href="https://i.stack.imgur.com/kGQAu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kGQAu.png" alt="enter image description here"></a></p>
  
  <p>Above the word 'balance'  Id like it to say the actual transaction that's changing the balance.  I'm wondering if this is possible at all with apex charts.</p>