ANNOUNCEMENTVoyage AI joins MongoDB to power more accurate and trustworthy AI applications on Atlas. Learn more >Voyage AI joins MongoDB to power more accurate and trustworthy AI applications on Atlas. >>

NEWSLearn why MongoDB was named a leader in the 2024 Gartner® Magic Quadrant™ Read the report >Learn why MongoDB was named a leader in the 2024 Gartner® Magic Quadrant™ >>

NEWMongoDB 8.0: Experience unmatched speed and performance. Check it out >MongoDB 8.0: Experience unmatched speed and performance. >>

Charts

Embedded analytics. Powerful, in-app visualizations.

Enrich your applications with a data visualization solution that is integrated with your database — no need to use complex charting libraries.

Try Free

Fully integrated with MongoDB Atlas

Empower and engage your users with relevant data when and where they need it. Charts provides seamless embedded analytics functionality that frees you up to focus on the end user experience, not the infrastructure behind it.

Learn more about Atlas Charts

Learn more about Atlas

A flexible, developer-first experience

There’s no need to deal with database connections, queries, or complex charting libraries. Atlas Charts lets you embed charts and dashboards without code via iFrame or via SDK for richer customization and interactivity.

Bring data to your users

Add high-quality, real-time analytics to your apps and products. Tailor your visualizations to customer needs with a wide range of options, including dynamic filters, light/dark mode, chart sizing, and refresh interval selection.

High performance plus strong security

Personalize app analytics and visualizations — without sacrificing security or efficiency. Atlas Charts features workload isolation to retrieve data without impacting operational performance. In addition, you can protect data by authorizing viewing privileges by profile or filtering by user roles.

Feature overview

Built into Atlas Charts

Seamlessly embed visualizations into your app in a matter of minutes.

Made for the document model

Effortlessly visualize your MongoDB Atlas data — no ETL, API, or connectors required.

In-app charts and dashboards, no code required

iFrame support allows for quick implementation — and for embedding analytics without using code.

Embedding SDK

Enable users to customize and interact with visualizations via the embedding SDK.

Dynamic filters

Make chart filtering interactive by adding click events through the SDK.

Display themes

Use light/dark mode to ensure a consistent visual identity with your app.

Automatic data refresh and caching

Set your charts to auto-refresh and cache at specific intervals to ensure your data is up-to-date.

Security

Choose from authenticated or unauthenticated embedding based on data privacy needs.

How to use Embedded Analytics

Atlas Charts offers several methods for embedding data visualizations into your applications. Learn more about each method to find out what works best for your needs.

View Documentation

Embedding a chart or dashboard via iFrame

Options for iFrame customization include sizing, chart refresh rate, and display theme selection.

Filtering through the SDK

Using our SDK to embed charts and dashboards gives you even more customization options, including dynamic filters, sizing, and style, plus on-demand refresh.

Handling click events with the embedding SDK

Use the click event handler to build interactive experiences into your embedded charts and dashboards. Clicking an element on a chart or dashboard can open more details on the clicked element, highlight the element, or create a filter for another chart.

Embedding a chart or dashboard via iFrame

Options for iFrame customization include sizing, chart refresh rate, and display theme selection.

Chart

Dashboard

Code Snippet

xxxxxxxxxx
 
<iframe style="background: #FFFFFF;border: none;border-radius: 2px;box-shadow: 0 2px 10px 0 rgba(70, 76, 79, .2);" width="640" height="480" src="https://charts.mongodb.com/CHARTSPROJECTNAME/embed/charts?id=MYCHARTID&maxDataAge=3600&theme=light&autoRefresh=true"></iframe>

Filtering through the SDK

Using our SDK to embed charts and dashboards gives you even more customization options, including dynamic filters, sizing, and style, plus on-demand refresh.

JavaScript

Code Snippet

xxxxxxxxxx
 
import "regenerator-runtime/runtime";import $ from "jquery";import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom"; async function renderChart() { const sdk = new ChartsEmbedSDK({   baseUrl: "https://charts.mongodb.com/TENANTNAME" });  const chart = sdk.createChart({   chartId: "CHARTID#" }); await chart.render(document.getElementById("chart"));  $("#refresh").on("click", () => {   chart.refresh(); }); $("#my-filter").on("change", e => {   const country = e.target.value;   country     ? chart.setFilter({ "filter-field": country })     : chart.setFilter({}); });} renderChart().catch(e => window.alert(e.message));

Handling click events with the embedding SDK

JavaScript

Code Snippet

import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
 
const sdk = new ChartsEmbedSDK({
 baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // Optional: ~REPLACE~ with the Base URL from your Embed Chart dialog
});
 
const chart1 = sdk.createChart({
 chartId: "CHARTID#", // Optional: ~REPLACE~ with the Chart ID from your Embed Chart dialog
 height: "700px",
});
 
const chart2 = sdk.createChart({
 chartId: "CHARTID#", // Optional: ~REPLACE~ with the Chart ID from your Embed Chart dialog
 height: "700px",
});
 
const clickHandler = (payload) => {
 chart1.setHighlight(payload.selectionFilter);
 chart2.setFilter(payload.selectionFilter);
 document.getElementById(
   "filterMessage"
 ).innerText = `${payload.data.y.value} movies from the ${payload.data.color.lowerBound}s`;
};
 
async function renderCharts() {
 await chart1.render(document.getElementById("chart1"));
 await chart2.render(document.getElementById("chart2"));
 
 const options = { includes: [{ roles: ["mark"] }] };
 await chart1.addEventListener("click", clickHandler, options);
}
 
renderCharts().catch((e) => window.alert(e.message));

xxxxxxxxxx
 
import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom"; const sdk = new ChartsEmbedSDK({ baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // Optional: ~REPLACE~ with the Base URL from your Embed Chart dialog}); const chart1 = sdk.createChart({ chartId: "CHARTID#", // Optional: ~REPLACE~ with the Chart ID from your Embed Chart dialog height: "700px",}); const chart2 = sdk.createChart({ chartId: "CHARTID#", // Optional: ~REPLACE~ with the Chart ID from your Embed Chart dialog height: "700px",}); const clickHandler = (payload) => { chart1.setHighlight(payload.selectionFilter); chart2.setFilter(payload.selectionFilter); document.getElementById(   "filterMessage" ).innerText = `${payload.data.y.value} movies from the ${payload.data.color.lowerBound}s`;}; async function renderCharts() { await chart1.render(document.getElementById("chart1")); await chart2.render(document.getElementById("chart2"));  const options = { includes: [{ roles: ["mark"] }] };

Chart

Dashboard

Code Snippet

 
<iframe style="background: #FFFFFF;border: none;border-radius: 2px;box-shadow: 0 2px 10px 0 rgba(70, 76, 79, .2);" width="640" height="480" src="https://charts.mongodb.com/CHARTSPROJECTNAME/embed/charts?id=MYCHARTID&maxDataAge=3600&theme=light&autoRefresh=true">
</iframe>

FAQ

Learn more about MongoDB’s embedded analytics.

What are embedded analytics?

Embedded analytics leverage technology, such as data visualization or business intelligence, to provide insights directly within applications or workflows. It provides a unified experience to users (both B2B and B2C) and allows them to access relevant data where and when they need it.

Why are embedded analytics important for business?

Embedded analytics let you meet customers where they are with the insights that will help them most. Whether they are using your application, gathering information from your website or blog, or something else, customers get contextually relevant insights through charts and dashboards, ensuring they receive a consistent and modern experience.

How can I learn more about embedded analytics?

Learn more about how to adopt embedded analytics in our documentation.

What does embedded data mean?

Embedded data allows you to bring information to your users at the right time and place. Most commonly, embedded data will live in your website or application, where visualizations can enhance a user’s experience.

What is embedded analytics software?

Many tools exist to embed analytics into websites and applications, but Embedded Analytics for Atlas Charts is the best way for MongoDB customers to leverage this feature in their applications. Learn more in our documentation.

What are the applications for embedded analytics?

Useful applications for embedded analytics include visualizations, which have the power to enhance everyday user experiences. Examples include the presentation of health data in a favorite exercise application, market data in a financial application, or charts and graphs in news stories. With embedded analytics, app builders give valuable insights to consumers, and consumers get a better user experience.

Will embedding charts slow down my operational workloads?

No. Embedded Analytics in Atlas Charts queries data from secondary nodes within your Atlas cluster, so there’s no impact on the performance of the operational transactions that occur on the primary node. You can also add an analytics node for greater isolation and resilience. Learn more about workload isolation with MongoDB Atlas and Charts.

How can I ensure sensitive data is secure in embedded charts?

The embedding SDK offers authentication features that integrate with your existing authentication system. You can filter data based on a user’s identity or role, and only authenticated users will be able to view the embedded charts. Read more about embedding authentication options in our documentation.

How does pricing work for embedded analytics?

Embedded Analytics is a feature built into MongoDB Atlas Charts. Charts is available to all users for free for up to approximately 500,000 chart renders per month. For more information on Charts pricing, go to our pricing page.

What authentication providers does Embedded Analytics support?

Embedded Analytics in Atlas Charts supports Realm, Google, and Custom JWT options for authentication. Learn more about these authentication providers here.

Start using Embedded Analytics today

MongoDB Charts is the best way to create, share, and embed data visualizations from MongoDB Atlas. Get started by deploying a free Atlas cluster and activating Charts.

Try FreeView documentation

EMBEDDED ANALYTICS:

No ETL or API required
No-code support
Integrated into Charts
SDK available