Customizing hover markers

The marker is a small rectangular popup that shows up when your mouse cursor (or touch pointer) hovers close to a data point. You can activate and deactivate the display of the hover markers by clicking once inside a graph. To convert a hover marker to a persistent marker you can perform a double-click.

A marker looks like this:

Name of plot
Quantity 1 ≈ 3.142 unit
Quantity 2 = 12 unit

The placeholders name of plot, quantity and unit are given by the names of the plot and the axes and can be customized as described below.

Customizing the marker text content

In the figure below, the graph on the left-hand side shows the default marker settings. The display name of the plot (first line) is derived from its name property, as the markerLegend property defaults to an empty string. Similarly, the display name of the axes is derived from their names (x and theta in the example below).

The graph on the right-hand side shows the same data but with customized marker settings using the markerLegend property of the individual plots to assign a more descriptive title to the marker. Moreover, the markerQuantity and markerUnit properties on the axes are customized to improve the number display.

Excluding plots and axes from hover markers

If you wish to exclude a plot from showing markers, you can set the excludeFromHoverMarker property of the plot to true.

If you wish to remove the numeric values originating from data mapped to a specific axes from the markers, you can set the excludeFromHoverMarker property of the axes to true.

Custom marker styles using CSS

The next example shows the same figure as above, with the exception that a custom CSS style is used in the graph on the right to customize the text color as well as the layout within the marker.

The customization is achieved by specifying a custom CSS style for a combination of two class descriptors: The first class descriptor specifies what kind of element (such as the figure, the graph, a specific plot, ...) is influenced by your style. The second class descriptor specifies whether you want to style the whole container, the quantity, the number or the unit within the marker.

Element specifiers

Type specifiers

This naming system is equivalent to the one used for styling legend entries. Please also refer to the documentation on object management.

Note that CSS class descriptors always start with a dot and can be combined by appending one to the other, as shown in the example code below.