3

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

enter image description here

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

4 Answers 4

6

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
  • Hey Mischa, How can I get tooltip's position from this chartContext obect ? Do you know ? Jun 15, 2021 at 5:13
  • As Mischa said, for the color: let color = w.globals.colors[seriesIndex] Nov 5, 2022 at 21:26
3

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;
      }
   }
1
  • You don't need to change the options in the JS file if only to change the tooltips styles, just change the css file. But, if you want to change the format value, you can use the formatter on tooltips. for more details can be read at this link: apexcharts.com/docs/options/tooltip Apr 22, 2020 at 20:10
1

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

Use encapsulation: ViewEncapsulation.None

1
  • 1
    Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Feb 22, 2022 at 18:23

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.