Highlight Chart Elements

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);

dashboard.getChart('<chartID>');

The setHighlight method takes an MQL 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.

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 MQL 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:

• Choropleth Chart

• Column and Bar Charts

• Table

• Donut Chart

• Line and Area Charts

• Non-geo Heatmap