CODEWITHSUNDEEP
javascripttooltipapexcharts
Hejhejhej123
Hejhejhej123

Reputation: 1195

How to add custom tooltip items to Apexcharts?

I am using ApexChart and I would like to add som more info to the tooltip (that shows on hover). I have read the documentation but I really don´t understand how to do it.

My problem is that I don't understand where I should add that extra data and how I can make it show in the tooltip?

Right now I only see the default in the tooltip, which is the name of the series and "y" value. I would like to see:

How can I add this to the tooltip? This is what I got so far:

Fiddle: https://jsfiddle.net/9m0r2ont/1/

Code:

var options = {
  chart: {
    height: 380,
    width: "100%",
    type: "scatter",
  },
  series: [
    {
      name: "Series 1",
      data: [
        {
          x: 100,
          y: 50,
          product: 'name',
          info: 'info',
          site: 'name'
        },
        {
          x: 150,
          y: 55,
          product: 'name',
          info: 'info',
          site: 'name'
        }
      ]
    }
  ],
  xaxis: {
    type: "numeric"
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

Upvotes: 12

Views: 45496

Answers (3)

EJA
EJA

Reputation: 35

  • Note I'm using APEX chart type box plot
  1. Go to the charts Attributes and under advanced you will see 'JavaScript Initialization Code' in that you will include this code

function(options) {
    options.tooltip = {
        renderer: function(context) {  
            var high = Math.round(context.data.high);
            var median = Math.round(context.data.q2);  
            var low = Math.round(context.data.low);
 
            var formatter = new Intl.NumberFormat('en-US');
 
            var tooltipContent = 'High: ' + formatter.format(high) + '\n' +
                                 'Median: ' + formatter.format(median) + '\n' +
                                 'Low: ' + formatter.format(low);
 
            return tooltipContent;
        }
    };
    
    return options;
}

Make sure tooltip is enabled for the chart. Some documentation I found helpful - https://apexcharts.com/docs/options/tooltip/

Hopefully this helps!

Upvotes: 1

joannaW
joannaW

Reputation: 41

You can use the renderToString function from react-dom/server to render the tooltip content without needing to define it as a string:

  tooltip: {
    custom: function({series, seriesIndex, dataPointIndex, w}) {
      var data = w.globals.initialSeries[seriesIndex].data[dataPointIndex];    
      return renderToString(<>custom TSX component</>);
    }
  }

Upvotes: 4

sbgib
sbgib

Reputation: 5828

Try like this:

var options = {
  chart: {
    height: 380,
    width: "100%",
    type: "scatter",
  },
  series: [
    {
      name: "Series 1",
      data: [
        {
          x: 100,
          y: 50,
          product: 'name',
          info: 'info',
          site: 'name'
        },
        {
          x: 150,
          y: 55,
          product: 'name',
          info: 'info',
          site: 'name'
        },
        {
          x: 130,
          y: 44,
          product: 'name',
          info: 'info',
          site: 'name'
        }
      ]
    }
  ],
  xaxis: {
    type: "numeric"
  },
  tooltip: {
    custom: function({series, seriesIndex, dataPointIndex, w}) {
      var data = w.globals.initialSeries[seriesIndex].data[dataPointIndex];
      
      return '<ul>' +
      '<li><b>Price</b>: ' + data.x + '</li>' +
      '<li><b>Number</b>: ' + data.y + '</li>' +
      '<li><b>Product</b>: \'' + data.product + '\'</li>' +
      '<li><b>Info</b>: \'' + data.info + '\'</li>' +
      '<li><b>Site</b>: \'' + data.site + '\'</li>' +
      '</ul>';
    }
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart">
</div>

To do this, you need to add a custom tooltip to the options object. Access the w object passed into the function to get the correct data. They have a similar example here. Once you can identify the data you're interested in within that object, use it to return the HTML to show in the tooltip.

Upvotes: 30

Related Questions