Docs Menu

Highlight Chart Elements

On this page

  • Prerequisites
  • Syntax
  • Chart Types

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

Before you begin, install the Charts Embedding JavaScript SDK.

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

charts.setHighlight(selectionFilter);

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.

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

The following chart types support programmatic highlighting:

Give Feedback
© 2021 MongoDB, Inc.

About

  • Careers
  • Legal Notices
  • Privacy Notices
  • Security Information
  • Trust Center
© 2021 MongoDB, Inc.