Come to the Dark Side With New Embedded Charts Capabilities

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.

← Previous

Upply is Using Data to Build a New Logistics Market – Here’s How

Learn how Upply is using MongoDB to build a new Logistics market

December 11, 2019
Next →

Using MongoDB Skill Scanner to Build Better Training Programs

Technology leaders know that transformation is about more than just adopting modern technologies like MongoDB. The entire organization has to rally behind change — which is no easy task. The skills that modern development teams need are evolving faster than ever, and hiring to fill skills gaps can be too time-consuming and expensive of a process for many organizations. So it’s imperative that we plan for how we want to bring our people with us on our modernization journey, and proactively upskill them on the technologies we’re betting on. Because what happens if you choose MongoDB, but your developers don’t know how to use it? CIOs know that training programs are easier said than done. EY reported that 30% of CIOs acknowledge that their training programs are ineffective, and that they’re struggling to retain talent because of it. These leaders come to us to help them build and execute their MongoDB training programs , and seek advice on two extremely common yet critical challenges: How do we get away from the less effective one-size-fits-all approach? How do we measure the ROI of our training program and connect it to business impact? How we use MongoDB Skill Scanner to overcome training challenges Our Professional Services team uses a tool called MongoDB Skill Scanner to address both of these challenges. This tool helps us provide these three benefits to our customers looking to build a training program: Improve MongoDB proficiency: Teams can use Skill Scanner to quickly and easily assess the MongoDB skill gaps of their team members and gain a comprehensive understanding of their team’s MongoDB skills baseline. Increased productivity and accuracy: When team members have a comprehensive understanding of MongoDB, they are able to work more quickly and accurately on projects, leading to increased productivity and a higher quality of work. Save time and money with targeted Training: Using Skill Scanner, customers can avoid wasting time and money on trial-and-error learning. Instead, they can focus on improving their skills in a more targeted and efficient way with right-sized training plans. By leveraging this data, our customers’ engineers can engage in the right training at the right time, targeted for their job role and specific skill shortages. When a training program is built this way, engineers maximize their knowledge retention and minimize time away from their projects. Skill Scanner includes three role-based assessments, one for developers, database administrators, and DevOps respectively. Through a series of multiple choice questions, Skill Scanner provides customers with a clear understanding of their level of expertise across a set of technical skills that are critical for success in their role. After submitting the assessment, engineers will get results in each skill area outlining if they are beginner, intermediate, or advanced. Why data-driven training programs matter We’ve learned that it’s not enough to just tell teams to go watch training videos or webinars on their own, or to place everyone in the same one-size-fits-all program. Skills gaps vary from team to team, and individual to individual. The one-size-fits-all approach of some programs may not address individual learners' needs, wasting time and making it difficult for them to acquire new skills. By using Skill Scanner, we’re able to interpret this data to help determine which training courses your team should take. But we don’t only capture this data before doing training; we use Skill Scanner again after training programs are completed to see where immediate improvements have been made. This helps technology leaders prove the impact and ROI of their training, and gives them the confidence that their teams are ready to be successful with MongoDB. Developing a Precision Learning Program To go even further, our team can work with you to build a Precision Learning Program, where we use Skill Scanner data to build learning schedules that are unique to each individual. These schedules include a variety of short, blended, learning events such as classes, technical workshops, self-paced exercises, and project coaching. We’ve seen PLP lead to higher knowledge retention and of course, measurable project results. A customer who recently concluded their PLP saw a 43% increase in knowledge retention. Getting started building a personalized training program Skill gaps aren’t a novel problem IT leaders are facing. But with new digital courses, training, and technologies, the resources to close these gaps are at your fingertips. Skill Scanner and Precision Learning Program have been specifically designed to empower teams by offering targeted training that enhances their understanding of MongoDB. These short training events are carefully crafted to close skill gaps without compromising developer productivity. We’ve seen a variety of customers use this tool to help train their team’s individual needs, from needing to upskill new hires on their teams, projects with new MongoDB products, migrating to MongoDB Atlas, and more. It also saves your business the hours developers would've wasted searching for answers (and developers don’t want to spend their time that way, either). “We need help getting from point A to point B and feel MongoDB is uniquely positioned to help” — CTO at large insurance firm If you're interested in trying out MongoDB Skill Scanner or want to explore the MongoDB Precision Learning Program further, you can reach out to your account representative or contact us directly .

June 7, 2023