hoverStyle

An object defining configuration options for a hovered series.

Type: Object

To set a custom 'hover' style for the series, use the hoverStyle object within the series configuration object.

Show Example:
jQuery

In this example, the style of a hovered point is changed.


                                    

                                    

border

An object defining the border options for a hovered series.

Type: Object

To set custom border settings specific to the 'hovered' state for the series, use the properties of the series | hoverStyle | border configuration object.

Show Example:
jQuery

In this example, the border of a hovered point is colored in lightblue and has a 1-pixel width.


                                    

                                    

color

Sets a color for the series when it is hovered over.

Type: String
Default Value: undefined

This option supports the following colors.

  • hexadecimal colors
  • RGB colors
  • RGBA colors (not supported in Internet Explorer 8)
  • predefined/cross-browser color names
  • predefined SVG colors (not supported in Internet Explorer 8)
Show Example:
jQuery

In the following example, a hovered point is colored in limegreen.


                                    

                                    

hatching

Specifies how to apply hatching to highlight the hovered series.

Type: String
Default Value: 'none'
Accepted Values: 'none' | 'right' | 'left'

The following values are available:

  • none
    Do not apply hatching.
  • right
    Apply an upward diagonal hatching style from left to right.
  • left
    Apply a downward diagonal hatching style from left to right.
Show Example:
jQuery

In this example, you can change the hatching style for a hovered point. Use the drop-down menu below to choose the required type of hatching. Then, hover over a point to see the effect.