tooltip

Show tooltip when user hovers over chart area.

Show tooltip only on certain series in a multi-series chart. Provide indices of those series which you would like to be shown.

When having multiple series, show a shared tooltip.
If you have a DateTime x-axis and multiple series chart ‐ make sure all your series has the same "x" values for a shared tooltip to work smoothly.
For example,

series: [{ name: "series A", data: [{ x: "2018-09-10", y: 120 }, { x: "2018-09-11", y: 480 }, { x: "2018-09-12", y: 330 }] }, { name: "series B", data: [{ x: "2018-09-10", y: 112 }, { x: "2018-09-11", y: 321 }, { x: "2018-09-12", y: 443 }] } ]

Notice, that the x values are same in both the series. If you want to have irregular timeseries, shared tooltip won't play nicely.
Here's an example of irregular timeseries with shared tooltip turned on - but tooltip only displays data for the series it is hovered on.

Follow user's cursor position instead of putting tooltip on actual data points.

Note: This option doesn't have any effect in pie/donut/radialbar/radar/treemap/heatmap charts.

Show tooltip only when user hovers exactly over datapoint.

In multiple series, when having shared tooltip, inverse the order of series (for better comparison in stacked charts).

Draw a custom html tooltip instead of the default one based on the values provided in the function arguments.
Custom Tooltip Example

tooltip: {
  custom: function({series, seriesIndex, dataPointIndex, w}) {
    return '<div className="arrow_box">' +
      '<span>' + series[seriesIndex][dataPointIndex] + '</span>' +
      '</div>'
  }
}

You can even return an HTML element instead of a string

tooltip: {
  custom: function({series, seriesIndex, dataPointIndex, w}) {
      const customElement = document.createElement('div')
      customElement.style.padding = '10px'
      customElement.innerHTML = 'My custom Tooltip: ' + series[seriesIndex][dataPointIndex]

      return customElement
  }
}

Note: In a multi-seris/combo chart, you can pass an array of functions to customize tooltip for different chart types. For instance, a combo chart with a candlestick and a line will have different tooltips.

In multiple series, hide those series which have zero values or null data for a particular category

When enabled, fill the tooltip background with the corresponding series color

Available Options

• light
• dark

If you further want to customize different background and forecolor of the tooltip, you should do it in CSS

.apexcharts-tooltip { background: #f3f3f3; color: orange; }

Font-family to apply on tooltip texts

Font-size to apply on tooltip texts

When user hovers over a datapoint of a particular series, other series will be grayed out making the current series highlight.

Whether to show the tooltip title (x-axis values) on tooltip or not

tooltip.x.show: true, the tooltip results in

tooltip.x.show: false, the tooltip results in

The format of the x-axis value to show on the tooltip. To view how to format datetime Strings, view the Datetime Formatter guide.

A custom formatter function which you can override and display according to your needs (a use case can be a date formatted using complex moment.js functions)

In a multiple series, the tooltip.y property can accept array to target formatters of different series scales.
Example

To format the Y-axis values of tooltip, you can define a custom formatter function. By default, these values will be formatted according yaxis.labels.formatter function which will be overrided by this function if you define it.

tooltip: {
  y: {
    formatter: function(value, { series, seriesIndex, dataPointIndex, w }) {
      return value
    }
  }
}

To format the z values of a Bubble series, you can use this function.

A custom text for the z values of Bubble Series.

Whether to show the color coded marker shape in front of Series Name which helps to identify series in multiple datasets.

The css property of each tooltip item container.

Set the tooltip to a fixed position

When having a fixed tooltip, select a predefined position.
Available Options:

• topLeft
• topRight
• bottomLeft
• bottomRight

Sets the left offset for the tooltip container in fixed position

Sets the top offset for the tooltip container in fixed position