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.

Ignored while interactive is enabled, because a tooltip that trails the cursor can never be entered.

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).

Keep the tooltip visible while the pointer is over it, so a link, a button or any other control returned by custom can actually be reached. Added in 7.6.0.

A default tooltip sets pointer-events: none, which is why a link inside a custom tooltip cannot be clicked without this: the pointer passes straight through, and moving toward the tooltip counts as leaving the data point, so it disappears on the way. Turning this on flips pointer-events to auto and defers the close by 150ms, which is the time the pointer needs to cross the gap between the data point and the tooltip. Entering the tooltip cancels that close; leaving it closes the tooltip.

tooltip: {
  interactive: true,
  custom: ({ series, seriesIndex, dataPointIndex }) => {
    const value = series[seriesIndex][dataPointIndex]
    return `<div class="tooltip-card">
              <strong>${value}</strong>
              <a href="/reports/${dataPointIndex}">Open report</a>
            </div>`
  },
}

Two things follow from it:

• followCursor is ignored while this is on. A tooltip that trails the cursor can never be entered, so the two are mutually exclusive rather than additive.
• On grouped charts, leaving the tooltip dismisses the tooltips on every chart in the group, not just the one under the pointer.

Leave it off unless the tooltip actually contains something to click. It is off by default because holding a tooltip open is the wrong behaviour for the ordinary read-a-value case.

Render a connector arrow pointing from the tooltip box at the data point. The arrow is auto-suppressed for followCursor, fixed.enabled, fillSeriesColor, non-axis charts, and most shared multi-series cases.

Available Options:

• true (default)
• false

One tight line instead of a card: the x label sits inline before the value, the marker goes, and the padding and font shrink.

For panels a normal card would cover, which is where it earns its place: small multiples, sparklines and dashboard tiles.

Available Options:

• false (default)
• true

A single-series chart also drops the series-name label, since there is nothing to tell apart. With several series the names stay, because they are what tells the rows apart.

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

Background color of the tooltip container. Accepts any CSS color value and overrides the theme-derived background.

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

Extra CSS class on the tooltip element, for styling it from a stylesheet.

Colours for the tooltip markers, one per series, overriding the series colours they would otherwise take.

The text shown before each y value in the tooltip. Carries a formatter receiving the series name.

Formats the text before each y value. Receives the series name and returns the string to show; return '' to drop it entirely.

y: { title: { formatter: function(seriesName) { return seriesName + ':' } } }