Apex Charts Custom Tooltips - How Do I Get Category Name And Color?

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}) { ret

Solution 1:

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)

Solution 2:

You can customize the css file, for example:

// This is for custom box.apexcharts-tooltip {
        border-radius: 12px;
        box-shadow: 02px15px0 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;
      }
   }

Solution 3:

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