BubbleChart.hoverItems

Syntax

hoverItems(items: Object, timelineStep: Number);

Parameters

items. Items to highlight.

timelineStep. Time line step.

Description

The hoverItems method sets highlighting for specified bubble chart bubbles.

Example

To execute this example, the HTML page must contain the BubbleChart component named bubbleChart (see Example of Creating the BubbleChart Component).

Create highlighting effects and set them for the bubble chart, set highlighting for specified items, convert color based on highlighting effect:

// Create highlighting effect
var highlightActiveEffect = new PP.Ui.HighlightEffect();
// Set red component offset
highlightActiveEffect.setROffset(50);
// Set green component offset
highlightActiveEffect.setGOffset(50);
// Set blue component offset
highlightActiveEffect.setBOffset(50);
// Set transparency component offset
highlightActiveEffect.setAOffset(50);
// Create highlighting effect
var highlightInactiveEffect = new PP.Ui.HighlightEffect();
// Set red component offset
highlightInactiveEffect.setROffset(-100);
// Set green component offset
highlightInactiveEffect.setGOffset(-100);
// Set blue component offset
highlightInactiveEffect.setBOffset(-100);
// Set transparency component offset
highlightInactiveEffect.setAOffset(-100);
// Set highlighting effects
if (bubbleChart.getEnableHover()) {
    bubbleChart.setHoverActiveEffects([highlightActiveEffect]);
    bubbleChart.setHoverInactiveEffects([highlightInactiveEffect]);
}
// Determine color and transfrom it based on highlighting effect
var color = new PP.Color(255, 0, 0);
console.log("Color components before transformation: " + color.getR() + " " + color.getG() + " " + color.getB());
highlightActiveEffect.apply(color);
console.log("Color components after transformation: " + color.getR() + " " + color.getG() + " " + color.getB());
// Determine bubble chart bubbles that must be highlighted
var hoveredItems = {
    Serie0_Point0: true
}
// Set object highlighting
bubbleChart.hoverItems(hoveredItems, 0);

As a result, highlighting of specified bubble chart bubble is set. Appearance of other bubbles also changes:

The browser console shows values of color components before and after conversion:

Color components before conversion: 255 0 0

Color components after conversion: 255 50 50

Remove items highlighting:

// Set an empty array of objects to highlight
bubbleChart.setHoveredItems();
// Refresh the bubble chart
bubbleChart.refresh();

As a result, bubble chart returns to its initial state.

Set highlighting for another item:

// Get bubble chart series point
var point = bubbleChart.getSeries()[26].getPoints()[0];
// Highlight series point
bubbleChart.setItemHoverness(point, true);
// Refresh bubble chart
bubbleChart.refresh();

As a result, highlighting is set for the bubble chart item:

BubbleChart