CODEWITHSUNDEEP
apexcharts
Johannes Pertl
Johannes Pertl

Reputation: 983

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>'
  }
}

Upvotes: 1

Views: 1970

Answers (2)

İsa Baş
İsa Baş

Reputation: 136

I created same tooltip with own code at custom function. There are more data at w.globals.tooltip.

                custom: function ({ series, seriesIndex, dataPointIndex, w }) {
                let title = w.globals.tooltip.tooltipTitle.outerHTML;
                let items = "";
                w.globals.tooltip.ttItems.forEach(x => {
                    items = items + x.outerHTML

                })
                return title + items;
            }

Upvotes: 5

Marco Castelluccio
Marco Castelluccio

Reputation: 10782

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.

Upvotes: 2

Related Questions