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:

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

• All figures on the page: kontrast

• A specific figures on the page: kontrast-figurename (where figurename is specified using the name property of the figure.

• A specific graph within a specific figure: kontrast-figurename-graphname (where each name corresponds to the value of the respective name properties.

• A specific plot within a specific graph within a specific figure: kontrast-figurename-graphname-plotname (where each name corresponds to the value of the respective name properties.

• A specific axis within a specific graph within a specific figure: kontrast-figurename-graphname-axisname (where each name corresponds to the value of the respective name properties.

Type specifiers

• For plots: The marker-legend span.

• For axes: The marker-quantity span is the first span within each row that shows the value of the markerQuantity property (or the name of the axis).

• For axes: The marker-number span is the second span within each row that shows the numeric value of the data point.

• For axes: The marker-unit span is the third and final span within each row that shows the value of the markerUnit property.

• For axes: The marker-container div-container is the parent of the quantity, number and unit span. Styling this element allows to rearrange the items within the rows.

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.