I want to create a custom tooltip in Apex Charts. Below is what is suggested in the official docs:

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

The tooltip above will display the value only. However, I also need information about the corresponding category name (and if possible chart color):

I bet this info is somwhere in w.globals but I failed to find it there (expesially given it's a recursive object which returns [Object Object] when you try to copy it from the console).

I want to create a custom tooltip in Apex Charts. Below is what is suggested in the official docs:

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

The tooltip above will display the value only. However, I also need information about the corresponding category name (and if possible chart color):

https://codepen.io/apexcharts/pen/xYqyYm

I bet this info is somwhere in w.globals but I failed to find it there (expesially given it's a recursive object which returns [Object Object] when you try to copy it from the console).

• javascript
• apexcharts

4 Answers 4

I think what you are searching for is

w.globals.labels[dataPointIndex]

For the category and maybe

w.globals.colors

Refers to the chart's colors. you can list the keys of the globals object with

Object.keys(w.globals) 

And the correspondingg values with

Object.values(w.globals).map(val => val ? val.toString() : null)

You can customize the css file, for example:

     // This is for custom box
      .apexcharts-tooltip {
        border-radius: 12px;
        box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
     // This is for custom header
          &.apexcharts-theme-light .apexcharts-tooltip-title {
             font-family: Lato !important;
             background-color: white;
             border-bottom: 0;
             font-weight: bold;
           }
    // This is for custom headers
      .apexcharts-tooltip-text-value {
         font-weight: normal;
         font-family: Lato;
         font-size: 12px;
      }
   }

This worked for me:

::ng-deep .apexcharts-tooltip{
 background-color:#52575C !important;
 color:#FEFEFE;
 border-color:#FEFEFE;
}

::ng-deep .apexcharts-tooltip-title{
 background-color:#52575C !important;
 color:#FEFEFE;
 border-color:#FEFEFE;
}

Use encapsulation: ViewEncapsulation.None