5

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'/>
Nadine
  • 357
  • 1
  • 5
  • 16

1 Answers1

7

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
  }
},
junedchhipa
  • 4,694
  • 1
  • 28
  • 28
  • This works for me. Do you also know how to change the style of the description like the font? – Nadine Feb 06 '20 at 10:27
  • 1
    The tooltip is an HTML element, so you can search for `.apexcharts-tooltip` in the console and set the fonts with CSS. – junedchhipa Feb 06 '20 at 10:51
  • With the above example, would it be possible to add additional lines? like if I wanted to display multiple rows in the hover tooltip, adding '\n' to the string does not work – Ravmcgav Mar 18 '20 at 16:32
  • Hey did you ever figure out if multiple lines are possible? I'm looking to do the same thing. – Cornel Verster Apr 19 '20 at 18:45