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