O'Reilly logo

Learning Highcharts by Joe Kuan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Styling the tooltips

Tooltips in Highcharts are enabled by the boolean option tooltip.enabled, which is true by default. Their content formats are flexible, which can be defined via a callback handler or in HTML style. We will continue from the example in the previous section. As the chart is packed with multiple lines and columns, first we can enable the crosshair tooltip for helping us align the data points onto the axes. The crosshairs configuration can take either a Boolean value to activate the feature or an object style for the crosshair line style. The following is the code snippet to set up crosshairs with an array of x- and y-axis configurations for the gray color and dash line styles.

 tooltip : { crosshairs: [{ color: '#5D5D5D', dashStyle: ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required