Search code examples
javascripteventslabelapexcharts

apexcharts add click event to label


I have an line-bar-area apexchart.
That looks like this: enter image description here

I succeeded to add an onclick event to the datapoints.
But I would like to add an onclick event to the labels (like 01, 02, 03, 04, 05)
Does anyone knows how to do that?
The code I use for the datapoints is this:

var options = {
  chart: {
    height: 400,
    type: 'line',
    stacked: false,
    events: {
      dataPointSelection: (event, chartContext, config) => { 
      var selecteddate = pad(config.dataPointIndex + 1, 2);
      console.log(selecteddate);    
     }
   }
 }

This works but how can I add events to the labels?
Or is this not possible?


Solution

  • I managed to do it by adding an event listener to my page.
    It may be not the label, but the tooltip is also great.

    $(".apexcharts-xaxistooltip").click(function(){
        var selecteddate = $(this).text();
        // do something
    });
    

    After that I also overwrite the css of the tooltip.

    .tooltip-inner {
      background-color: #00acd6 !important;
      /*!important is not necessary if you place custom.css at the end of your css calls. For the purpose of this demo, it seems to be required in SO snippet*/
      color: #fff;
    }
    .apexcharts-xaxistooltip{
      opacity: 1;
      pointer-events: all;
    }
    .apexcharts-xaxistooltip:hover{
      background: #46A7B3;
      color: white;
      cursor: pointer;
    }
    

    This gives me the nice hover effect and clickable cursor.
    In this way the tooltips are clickable and won't fade out when out of hover.

    enter image description here