Tooltip

Tooltip allows you to preview data when user hovers over the chart area.

Setting global config for Tooltip

To set global options for the tooltips, it should be defined in Apex.tooltip

Formatting

Tooltip texts can be modified via formatters which basically are custom functions that takes a single argument and returns a new value based on that. The custom formatting functions can be applied to:
tooltip.x.formatter – the x-axis value label formatter – (applicable in axis charts)
tooltip.y.formatter – the y-axis value label formatter
tooltip.z.formatter – the z value label formatter – (only applicable in bubble charts)

DateTime Formatting

The X values formatting for datetime values can be also formatted by:
tooltip.x.format = "DD/MM"

View the available options for datetime X values – Datetime format

Styling Tooltips

The styling of tooltip is mostly controlled by CSS as tooltip element is plain HTML and not SVG. .apexcharts-tooltip is the place you should be looking for when tweaking styles in CSS.

Tooltip Theme

You can specify the theme color of tooltip by setting tooltip.theme property to light or dark.

Custom Tooltip

If you want to have a totally customized tooltip, you can write a custom html function that will override the default tooltip structure.
Read more: Custom Tooltip

For the full set of options available for the tooltip, see tooltip configuration

Why Choose ApexCharts

Tooltip

Stay Updated