title: How to add custom tooltip items to Apexcharts?
body: <p>I am using ApexChart and I would like to add som more info to the tooltip (that shows on hover). I have read the documentation but I really don´t understand how to do it.</p>
  <p>My problem is that I don't understand where I should add that extra data and how I can make it show in the tooltip?</p>
  <p>Right now I only see the default in the tooltip, which is the name of the series and &quot;y&quot; value. I would like to see:</p>
  <ul>
  <li><strong>Price</strong>: (x value)</li>
  <li><strong>Number</strong>: (y value)</li>
  <li><strong>Product</strong>: 'name',</li>
  <li><strong>Info</strong>: 'info',</li>
  <li><strong>Site</strong>: 'name'</li>
  </ul>
  <p>How can I add this to the tooltip? This is what I got so far:</p>
  <p>Fiddle: <a href="https://jsfiddle.net/9m0r2ont/1/" rel="nofollow noreferrer">https://jsfiddle.net/9m0r2ont/1/</a></p>
  <p>Code:</p>
  <pre><code>var options = {
    chart: {
      height: 380,
      width: &quot;100%&quot;,
      type: &quot;scatter&quot;,
    },
    series: [
      {
        name: &quot;Series 1&quot;,
        data: [
          {
            x: 100,
            y: 50,
            product: 'name',
            info: 'info',
            site: 'name'
          },
          {
            x: 150,
            y: 55,
            product: 'name',
            info: 'info',
            site: 'name'
          }
        ]
      }
    ],
    xaxis: {
      type: &quot;numeric&quot;
    }
  };
  
  var chart = new ApexCharts(document.querySelector(&quot;#chart&quot;), options);
  
  chart.render();
  </code></pre>