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

回答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)

回答2:

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

来源：https://stackoverflow.com/questions/59564412/apex-charts-custom-tooltips-how-do-i-get-category-name-and-color

标签

javascript

apexcharts