I'm using the heatmap chart from apexcharts and I want to customize the tooltips. For each number of the data I want to provide a matching description as a string. The description values are stored in a simple array like this:

let chartLabels = ['January', 'February', 'March'];

How can I use the custom field in the chart options to provide the data fields with the custom tooltips?

chartData:

let chartData = {
    options: {
        chart: {
            toolbar: {
                show: false
            },
        },
        yaxis: {
            show: false
        },
        xaxis: {
            show: false,
            labels: {
                show: false,
            }
        },
        tooltip: {
            enabled: true,
            //custom:
        },
     },
     series: [{
        name: ' ',
        data: [24, 53, 54, 545, 545]
      },
        {
            name: ' ',
            data: [654, 454, 454, 44, 34]
        }]
};

<Chart
    options={chartData.options}
    series={chartData.series}
    type='heatmap'/>

I'm using the heatmap chart from apexcharts and I want to customize the tooltips. For each number of the data I want to provide a matching description as a string. The description values are stored in a simple array like this:

let chartLabels = ['January', 'February', 'March'];

How can I use the custom field in the chart options to provide the data fields with the custom tooltips?

chartData:

let chartData = {
    options: {
        chart: {
            toolbar: {
                show: false
            },
        },
        yaxis: {
            show: false
        },
        xaxis: {
            show: false,
            labels: {
                show: false,
            }
        },
        tooltip: {
            enabled: true,
            //custom:
        },
     },
     series: [{
        name: ' ',
        data: [24, 53, 54, 545, 545]
      },
        {
            name: ' ',
            data: [654, 454, 454, 44, 34]
        }]
};

<Chart
    options={chartData.options}
    series={chartData.series}
    type='heatmap'/>

• javascript
• reactjs
• apexcharts

1 Answer 1

You should inject the description in the series data itself to retrieve it easily later when using a custom tooltip. The opts argument in the custom tooltip contains all the necessary information to retrieve that value as described in the below code.

series: [{
  name: "series1"
  data: [{
    x: "category 1"
    y: 10
    description: "TEAM A"
  }, {
    x: "category 2"
    y: 20
    description: "TEAM B"
  }]
}, {
  name: "series2"
  data: [{
    x: "category 3"
    y: 10
    description: "TEAM C"
  }, {
    x: "category 4"
    y: 20
    description: "TEAM D"
  }]
}],
tooltip: {
  custom: function(opts) {
    const desc =
      opts.ctx.w.config.series[opts.seriesIndex].data[
        opts.dataPointIndex
      ].description

    const value = opts.series[opts.seriesIndex][opts.dataPointIndex]

    return desc + ': ' + value
  }
},