Search code examples
apexcharts

Where can I find the Apexcharts html of default tooltips?

I want to write a custom tooltip function that looks exactly like the default one of the multi line chart. The only thing I want to change is to use different, dynamic labels instead of the series names. Where can I find the html so that I can adapt it for my custom function?

The only code I could find is this very short snippet, which only explains the usage of the parameters:

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

  • The tooltip is created dynamically, see https://github.com/apexcharts/apexcharts.js/blob/e0f5e122416537a3c5becd58d6f0e1eac162f7e8/src/modules/tooltip/Tooltip.js#L65.

    You can find the related CSS rules at https://github.com/apexcharts/apexcharts.js/blob/e51733a8c037f73733bb2b49d6b8dc3e9081fe5b/dist/apexcharts.css#L39.