Highlight What Matters with the MongoDB Charts SDK

We're proud to announce that with the latest release of the MongoDB Charts SDK you can now apply highlights to your charts. These allow you to emphasize and deemphasize your charts with our MongoDB query operators. Build a richer interactive experience for your customers by highlighting with the MongoDB Charts embedding SDK.

By default, MongoDB Charts allows for emphasizing parts of your charts by series when you click within a legend.

With the new highlight capability in the Charts Embedding SDK, we put you in control of when this highlighting should occur, and what it applies to.

Why would you want to apply highlights?

Highlighting opens up the opportunity for new experiences for your users. The two main reasons why you may want to highlight are:

• To show user interactions: We use this in the click handler sandbox to make it obvious what the user has clicked on. You could also use this to show documents affected by a query for a control panel.
• Attract the user’s attention: If there's a part of the chart you want your users to focus on, such as the profit for the current quarter or the table rows of unfilled orders.

Getting started

With the release of the Embedding SDK, we've added the setHighlight method to the chart object, which uses MQL queries to decide what gets highlighted. This lets you attract attention to marks in a bar chart, lines in a line chart, or rows in a table. Most of our chart types are already supported, and more will be supported as time goes on. If you want to dive into the deep end, we've added a new highlighting example and updated the click event examples to use the new highlighting API:

• Highlighting sandbox
• Click events sandbox
• Click events with filtering sandbox

The anatomy of a click

In MongoDB Charts, each click produces a wealth of information that you can then use in your applications, as seen below:

In particular, we generate an MQL expression that you can use called selectionFilter, which represents the mark selected. Note that this filter uses the field names in your documents, not the channel names.

Before, you could use this to filter your charts with setFilter, but now you can use the same filter to apply emphasis to your charts.

All this requires is calling setHighlight on your chart with the selectionFilter query that you get from the click event, as seen in this sandbox.

Applying more complex highlights

Since we accept a subset of the MQL language for highlighting, it's possible to specify highlights which target multiple marks, as well as multiple conditions. We can use expressions like $lt and $gte to define ranges which we want to highlight.

And since we support the logical operators as well, you can even use $and / $or.

All the Comparison, Logical and Element query operators are supported, so give it a spin!

Conclusion

This ability to highlight data will make your charts more interactive and help you better emphasize the most important information in your charts. Check out the embedding SDK to start highlighting today!