Come to the Dark Side With New Embedded Charts Capabilities

Tom Hollander

#Charts

MongoDB Charts has been updated to give you more control over your embedded charts. You can now show charts in a dark theme, and apply custom filters to unauthenticated embedded charts.

Embedding Keeps Getting Better

MongoDB Charts is the data visualization tool built for MongoDB data, and built right into MongoDB Atlas. You can quickly build visualizations of your data, share them with your colleagues on dashboards, or share them with the world by embedding them into your own apps and web pages. Charts can be embedded in unauthenticated mode via a simple IFRAME snippet, or using a verified signature, allowing you to tie the chart to your authentication system for fine-grained access control.

The latest release of Charts includes a number of new features that make embedded charts even better. The new release is already live on MongoDB Atlas, and available for on-prem users to install in the new 19.12 release.

Dark Theme

We love dark themed UIs in the Charts team. Many of us use one every day in tools like Slack and Visual Studio Code. While we aren’t yet ready to roll out a dark theme across the entire Charts application, we know many of you are building apps that use a dark theme, or have it as an option. And if you want to put a chart in your dark app, a bright white background just isn’t going to work.

That’s why we’re now giving you the choice of a light or a dark theme for your embedded charts. This is controlled through the new theme query string parameter, and we have also improved the Embed Chart UI to make it easy to find and use this option:

"Embed Chart User Interface"

Dark themes are supported for all chart types, including tables and maps. The iframe snippets from the Embed dialog specify a default background colour in their inline styles, which you can change to a different shade, or remove altogether if you’d prefer your site’s background to show through. Here are some examples of the same embedded charts, rendered with a dark and a light theme.


Alongside the support for the dark theme, you may have noticed that we’ve done some work to make the MongoDB logo on embedded charts much less intrusive. It’s also possible to completely remove the logo if you require an unbranded experience.

Custom Filters

The other big improvement we’ve made to embedding is around custom filters. A few months ago we added support for custom filters on embedded charts using the verified signature mode. This option is still available and is the right choice if you want to enforce the use of specific filters, e.g. to make sure a user can only see their own data.

However, there are also times when you want to provide a filtering experience over less sensitive data, using the simplicity of the unauthenticated embedding option. With the latest release of Charts, it is now possible to provide custom filters for unauthenticated charts.

While this feature is most likely to be exposed to users via your own UI widgets, it is important to remember that a savvy user can modify an unauthenticated chart’s filters to whatever they want. To ensure that this approach can’t be used to leak sensitive information, the chart author remains in control over exactly which fields can be used by viewers on custom filters. By default, an unauthenticated chart cannot be filtered at all. Using the Embed Chart dialog, a chart author can specify the fields that may be used in unauthenticated chart filters:

"Embed Chart Dialog"

Once these fields have been set, your app can pass a query via the iframe URL’s filter parameter using these fields. For example you could append the URL-encoded version of { property_type: { $in: [ 'Apartment', 'Death Star' ] } } but if someone tried a query like { 'owner.name': 'Darth Vader' } the chart would not render since owner.name is not on the white list of filter fields.

More to Come

We’re really excited by these new embedding capabilities, and we hope you find them useful too. But we’re not done with embedding yet. Our next set of features revolves around a JavaScript SDK for embedding, allowing you to embed and control charts directly from your web code. We’ll share more news about this soon. In the meantime, if you have suggestions for other ways to improve Charts, please drop by the MongoDB Feedback Engine to share your thoughts.

Get started with MongoDB Charts on MongoDB Atlas with a free forever M0 tier today.