Apexcharts.js: Extend custom tooltip example with more values

[simzikov]

Apex Charts tooltips are very powerful and I like that we can customize them with the Apex.tooltip.custom method. A regular Apex Charts tooltip contains lots of information in it, however in the custom tooltip example you have (https://codepen.io/apexcharts/pen/NBdyvV) you only show how to get the current value which is the easiest to find. I tried to find the category names but the w object is so huge it's very hard to find the info you need there. It would be great if you could extent the custom tooltip example with all the info you have in the regular tooltip.

[junedchhipa]

Sure, I will update the example.

[junedchhipa]

Updated the codepen.
X-values or categories are accessible in w.globals.labels

tooltip: {
  custom: function({ series, seriesIndex, dataPointIndex, w }) {
    return (
      '<div class="arrow_box">' +
      '<span>' +
      w.globals.labels[dataPointIndex] +
      ': ' +
      series[seriesIndex][dataPointIndex] +
      '</span>' +
      '</div>'
    )
  }
}

[simzikov]

Thanks for that. Problem with this approach is that when you switch to line charts, category names will be presented as numbers: https://codepen.io/Deka87/pen/YzPExYx?editors=0010. Any workaround for this?

[ederson13]

i had the same issue
use categoryLabels instead of labels