shared: Boolean
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.
followCursor: Boolean
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.
inverseOrder: Boolean
In multiple series, when having shared tooltip, inverse the order of series (for better comparison in stacked charts).
custom: function || Array of functions
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-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.
theme: String
Available Options
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; }
y: Object or Array
In a multiple series, the tooltip.y property can accept array to target formatters of different series scales.
Example
formatter: function
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 } } }
title
formatter: function
The series name which appears besides values can be formatted using this function. Default behaviour is (seriesName) => returns seriesName
fixed
enabled: Boolean
Set the tooltip to a fixed position
position: String
When having a fixed tooltip, select a predefined position.
Available Options:
- topLeft
- topRight
- bottomLeft
- bottomRight
offsetX: Number
Sets the left offset for the tooltip container in fixed position
offsetY: Number
Sets the top offset for the tooltip container in fixed position
Please wait...