ReactJS ApexCharts not displaying tooltip

Question

I take one of the examples posted and slightly modify it by removing some data. When the sets don't have the same number of data points, the tooltips stop displaying. Please see the following two examples. The first one being the one posted in the docs. The second, the modified version. When hovering starting from the end data points, the tooltip doesn't display anything for the last columns. Example from docs: https://codepen.io/junedchhipa/pen/YJQKOy

var options = {
      chart: {
        height: 310,
        type: 'line',
        stacked: false,
      },
      stroke: {
        width: [0, 2, 5],
        curve: 'smooth'
      },
      plotOptions: {
        bar: {
          columnWidth: '50%'
        }
      },
      series: [{
        name: 'Series Column',
        type: 'column',
        data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
      }, {
        name: 'Series Area',
        type: 'area',
        data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
      }, {
        name: 'Series Line',
        type: 'line',
        data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
      }],
      fill: {
        opacity: [0.85,0.25,1],
                gradient: {
                    inverseColors: false,
                    shade: 'light',
                    type: "vertical",
                    opacityFrom: 0.85,
                    opacityTo: 0.55,
                    stops: [0, 100, 100, 100]
                }
      },
      labels: ['01/01/2003', '02/01/2003','03/01/2003','04/01/2003','05/01/2003','06/01/2003','07/01/2003','08/01/2003','09/01/2003','10/01/2003','11/01/2003'],
      markers: {
        size: 0
      },
      xaxis: {
        type:'datetime'
      },
      yaxis: {
        title: {
          text: 'Points',
        },
        min: 0
      },
      legend: {
        show: false
      },
      tooltip: {
        shared: true,
        intersect: false,
        y: {
          formatter: function (y) {
            if(typeof y !== "undefined") {
              return  y.toFixed(0) + " points";
            }
            return y;

          }
        }
      }

    }

    var chart = new ApexCharts(
      document.querySelector("#chart"),
      options
    );

    chart.render();


    // check if the checkbox has any unchecked item
    checkLegends()

    function checkLegends() {
      var allLegends = document.querySelectorAll(".legend input[type='checkbox']")

      for(var i = 0; i < allLegends.length; i++) {
        if(!allLegends[i].checked) {
          chart.toggleSeries(allLegends[i].value)
        }
      }
    }

    // toggleSeries accepts a single argument which should match the series name you're trying to toggle
    function toggleSeries(checkbox) {
      chart.toggleSeries(checkbox.value)
    }

Modified example: https://codepen.io/mmk2118/pen/mdbpOWN

var options = {
      chart: {
        height: 310,
        type: 'line',
        stacked: false,
      },
      stroke: {
        width: [0, 2, 5],
        curve: 'smooth'
      },
      plotOptions: {
        bar: {
          columnWidth: '50%'
        }
      },
      series: [{
        name: 'Series Column',
        type: 'column',
        data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
      }, {
        name: 'Series Area',
        type: 'area',
        data: [44, 55, 41, 67, 22, 43, 21, 41]
      }, {
        name: 'Series Line',
        type: 'line',
        data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
      }],
      fill: {
        opacity: [0.85,0.25,1],
                gradient: {
                    inverseColors: false,
                    shade: 'light',
                    type: "vertical",
                    opacityFrom: 0.85,
                    opacityTo: 0.55,
                    stops: [0, 100, 100, 100]
                }
      },
      labels: ['01/01/2003', '02/01/2003','03/01/2003','04/01/2003','05/01/2003','06/01/2003','07/01/2003','08/01/2003','09/01/2003','10/01/2003','11/01/2003'],
      markers: {
        size: 0
      },
      xaxis: {
        type:'datetime'
      },
      yaxis: {
        title: {
          text: 'Points',
        },
        min: 0
      },
      legend: {
        show: false
      },
      tooltip: {
        shared: true,
        intersect: false,
        y: {
          formatter: function (y) {
            if(typeof y !== "undefined") {
              return  y.toFixed(0) + " points";
            }
            return y;

          }
        }
      }

    }

    var chart = new ApexCharts(
      document.querySelector("#chart"),
      options
    );

    chart.render();


    // check if the checkbox has any unchecked item
    checkLegends()

    function checkLegends() {
      var allLegends = document.querySelectorAll(".legend input[type='checkbox']")

      for(var i = 0; i < allLegends.length; i++) {
        if(!allLegends[i].checked) {
          chart.toggleSeries(allLegends[i].value)
        }
      }
    }

    // toggleSeries accepts a single argument which should match the series name you're trying to toggle
    function toggleSeries(checkbox) {
      chart.toggleSeries(checkbox.value)
    }

Answer 1

Your codepen example uses an older version of ApexCharts. Please update by pulling the latest version here https://cdn.jsdelivr.net/npm/apexcharts@latest

Also, if you have a different number of data-points in each series, you can turn off shared tooltip and only show the tooltip when the user hovers over bars/markers directly.

tooltip: {
  shared: false,
  intersect: true
}