tooltip

Show tooltip when user hovers over chart area.

false turns hover handling off entirely: no tooltip, and on a swept line or area chart chart.events.mouseMove and click report dataPointIndex: null. To keep the hover and hide only the box, use visible: false.

Available since v8.5.0. false keeps everything a hover resolves but draws no tooltip box. The point under the pointer is still found, chart.events.mouseMove and click report its seriesIndex and dataPointIndex, data point events fire as usual, and keyboard navigation still announces the focused point. Crosshairs and hover markers follow their own options. The x-axis and y-axis tooltips are not drawn either.

Use it when your app shows the hover details in its own UI:

tooltip: { visible: false },
chart: {
  events: {
    mouseMove(event, chartContext, { seriesIndex, dataPointIndex }) {
      if (Number.isInteger(dataPointIndex) && dataPointIndex >= 0) showDetails(seriesIndex, dataPointIndex)
    }
  }
}

Ignored while enabled is false.

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.

On horizontal bar and timeline charts the box stays against the hovered bar while arrow is on, even with followCursor, which then only drops the arrow connector. Set arrow: false to have the box follow the pointer.

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.

On horizontal bar and timeline charts the arrow also decides placement: with it on, the box sits against the hovered bar (above it, below it, or beside it where there is no room), and followCursor does not move it (it only hides the connector). Turn it off to let the box follow the pointer.

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 class="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-series/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.

Return null or undefined to keep the built-in tooltip for that point.

What custom returns is rendered as HTML, so escape any part of it that comes from user data. The built-in tooltip shows series names, categories and goal names as text (from 8.4; tree node names in treemap, sunburst and icicle tooltips from 8.3.1), and the same holds for HTML returned by the x, y and title formatters below: it renders, so it is yours to escape.

Tree charts. From 8.4, custom also draws the node tooltip of a sunburst or icicle chart and the branch (parent container) tooltip of a nested treemap. Those calls pass dataPointIndex: -1 and these extra fields:

A sunburst or icicle calls it with seriesIndex: 0, so the array form uses its first entry; a treemap branch passes its own series. On a treemap, plotOptions.treemap.parents.tooltip.formatter still owns branch tooltips when it is set.

A custom written for data points now runs for those nodes too, where it has no data point to read. Return null when node is set to keep the built-in row there:

tooltip: {
  custom: function({ series, seriesIndex, dataPointIndex, node }) {
    if (node) return null // a branch or partition node: keep the built-in row
    return '<div class="arrow_box">' + series[seriesIndex][dataPointIndex] + '</div>'
  }
}

In a shared tooltip, hide the row of each series whose value is 0 at the hovered category.

The test reads the data, not the formatted text: a value of 0 is hidden even when a formatter prints it as $0, while 0.004 printed as 0.00 stays. A range series is hidden when both of its ends are empty or zero, so a range that starts at 0 still shows.

A gap (null) does not depend on this option. Its row is hidden when the y.formatter returns null or undefined for it, which the default formatter does, with this option on or off. A formatter that turns null into text ('$' + value prints $null) keeps the row either way.

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
    }
  }
}

value is null wherever the series has a gap, so guard before calling a number method on it. In a shared tooltip, returning null or undefined hides that series' row; returning '' leaves an empty row instead.

tooltip: {
  shared: true,
  y: {
    formatter: (value) => (value == null ? null : value.toFixed(2))
  }
}

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. Pass several classes as a space-separated list, such as 'card compact'.

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 + ':' } } }