Highlight Chart Elements

The Charts Embedding JavaScript SDK enables you to programmatically highlight specific elements and clicked events on embedded charts and charts within embedded dashboards.

Prerequisites

Before you begin, install version 2.1.0 or later of the Charts Embedding JavaScript SDK.

Syntax

The Charts Embedding JavaScript SDK method for enabling highlighting has the following syntax:

charts.setHighlight(selectionFilter);

Note

If you want to highlight charts within an embedded dashboard, first run the following method to retrieve a specific chart from the Dashboard instance:

dashboard.getChart('<chartID>');

The setHighlight method takes an filter. You can provide the MQL filter directly to the setHighlight method as shown in the example below or through the click event payload selectionFilter to highlight specific elements and click events.

Example

chart.setHighlight(
  {
    city: { $nin: ['New York', 'London', 'Paris'] }
  }
)

The selectionFilter must match on values used on the chart's category or series channel.

The Charts Embedding JavaScript SDK also includes the highlight option for retrieving the highlight query:

const highlight = chart.getHighlight();

The highlight option takes a parameter of a Javascript object that represents an filter. You can set the highlight option when you create a chart or after a chart renders.

You can include the following query elements:

$eq (equality) match for all supported chart types.
$in for all supported chart types.
$nin check for Line and Area Charts, Column and Bar Charts, and non-geo Heatmap.
$gte and $lt closed range to match number or date bins within the specified range for Line and Area Charts, Column and Bar Charts, and non-geo Heatmap.
Any combination of $gt, $gte, $lt, and $lte open range on the X-axis for continuous Line and Area Charts.

Chart Types

The following chart types support programmatic highlighting:

Back

Handle Click Events

Tutorials