Explore Developer Center's New Chatbot! MongoDB AI Chatbot can be accessed at the top of your navigation to answer all your MongoDB questions.

Join us at AWS re:Invent 2024! Learn how to use MongoDB for AI use cases.
MongoDB Developer
Atlas
plus
Sign in to follow topics
MongoDB Developer Centerchevron-right
Developer Topicschevron-right
Productschevron-right
Atlaschevron-right

MongoDB Charts Embedding SDK with React

Maxime Beugnet5 min read • Published Oct 20, 2021 • Updated Sep 09, 2024
ReactAtlasCharts
Facebook Icontwitter iconlinkedin icon
Realm Function
Rate this tutorial
star-empty
star-empty
star-empty
star-empty
star-empty
Some features mentioned below will be deprecated on Sep. 30, 2025. Learn more.

Introduction

In the previous blog post of this series, we created a React website that was retrieving a list of countries using Axios and a REST API hosted in MongoDB Realm.
In this blog post, we will continue to build on this foundation and create a dashboard with COVID-19 charts, built with MongoDB Charts and embedded in a React website with the MongoDB Charts Embedding SDK.
To add some spice in the mix, we will use our list of countries to create a dynamic filter so we can filter all the COVID-19 charts by country.
You can see the final result here that I hosted in a MongoDB Realm application using the static hosting feature available.
Final website

Prerequisites

The code of this project is available on GitHub in this repository.
1git clone git@github.com:mongodb-developer/mongodb-charts-embedded-react.git
To run this project, you will need node and npm in a recent version. Here is what I'm currently using:
1$ node -v
2v14.17.1
3$ npm -v
48.0.0
You can run the project locally like so:
1$ cd mongodb-realm-react-charts
2$ npm install
3$ npm start
In the next sections of this blog post, I will explain what we need to do to make this project work.

Create a MongoDB Charts Dashboard

Before we can actually embed our charts in our custom React website, we need to create them in MongoDB Charts.
Here is the link to the dashboard I created for this website. It looks like this.
Dashboard in MongoDB Charts
If you want to use the same data as me, check out this blog post about the Open Data COVID-19 Project and especially this section to duplicate the data in your own cluster in MongoDB Atlas.
As you can see in the dashboard, my charts are not filtered by country here. You can find the data of all the countries in the four charts I created.

Enable the Filtering and the Embedding

To enable the filtering when I'm embedding my charts in my website, I must tell MongoDB Charts which field(s) I will be able to filter by, based on the fields available in my collection. Here, I chose to filter by a single field, country, and I chose to enable the unauthenticated access for this public blog post (see below).
Embed menu in MongoDB Charts
In the User Specified Filters field, I added country and chose to use the JavaScript SDK option instead of the iFrame alternative that is less convenient to use for a React website with dynamic filters.
Embedding Menu in my Charts
For each of the four charts, I need to retrieve the Charts Base URL (unique for a dashboard) and the Charts IDs.
Now that we have everything we need, we can go into the React code.

React Website

MongoDB Charts Embedding SDK

First things first: We need to install the MongoDB Charts Embedding SDK in our project.
1npm i @mongodb-js/charts-embed-dom
It's already done in the project I provided above but it's not if you are following from the first blog post.

React Project

My React project is made with just two function components: Dashboard and Chart.
The index.js root of the project is just calling the Dashboard function component.
1import React from 'react';
2import ReactDOM from 'react-dom';
3import Dashboard from "./Dashboard";
4
5ReactDOM.render(<React.StrictMode>
6 <Dashboard/>
7</React.StrictMode>, document.getElementById('root'));
The Dashboard is the central piece of the project:
1import './Dashboard.css';
2import {useEffect, useState} from "react";
3import axios from "axios";
4import Chart from "./Chart";
5
6const Dashboard = () => {
7 const url = 'https://webhooks.mongodb-stitch.com/api/client/v2.0/app/covid-19-qppza/service/REST-API/incoming_webhook/metadata';
8 const [countries, setCountries] = useState([]);
9 const [selectedCountry, setSelectedCountry] = useState("");
10 const [filterCountry, setFilterCountry] = useState({});
11
12 function getRandomInt(max) {
13 return Math.floor(Math.random() * max);
14 }
15
16 useEffect(() => {
17 axios.get(url).then(res => {
18 setCountries(res.data.countries);
19 const randomCountryNumber = getRandomInt(res.data.countries.length);
20 let randomCountry = res.data.countries[randomCountryNumber];
21 setSelectedCountry(randomCountry);
22 setFilterCountry({"country": randomCountry});
23 })
24 }, [])
25
26 useEffect(() => {
27 if (selectedCountry !== "") {
28 setFilterCountry({"country": selectedCountry});
29 }
30 }, [selectedCountry])
31
32 return <div className="App">
33 <h1 className="title">MongoDB Charts</h1>
34 <h2 className="title">COVID-19 Dashboard with Filters</h2>
35 <div className="form">
36 {countries.map(c => <div className="elem" key={c}>
37 <input type="radio" name="country" value={c} onChange={() => setSelectedCountry(c)} checked={c === selectedCountry}/>
38 <label htmlFor={c} title={c}>{c}</label>
39 </div>)}
40 </div>
41 <div className="charts">
42 <Chart height={'600px'} width={'800px'} filter={filterCountry} chartId={'6e3cc5ef-2be2-421a-b913-512c80f492b3'}/>
43 <Chart height={'600px'} width={'800px'} filter={filterCountry} chartId={'be3faa53-220c-438f-aed8-3708203b0a67'}/>
44 <Chart height={'600px'} width={'800px'} filter={filterCountry} chartId={'7ebbba33-a92a-46a5-9e80-ba7e8f3b13de'}/>
45 <Chart height={'600px'} width={'800px'} filter={filterCountry} chartId={'64f3435e-3b83-4478-8bbc-02a695c1a8e2'}/>
46 </div>
47 </div>
48};
49
50export default Dashboard;
It's responsible for a few things:
  • Line 17 - Retrieve the list of countries from the REST API using Axios (cf previous blog post).
  • Lines 18-22 - Select a random country in the list for the initial value.
  • Lines 22 & 26 - Update the filter when a new value is selected (randomly or manually).
  • Line 32 counties.map(...) - Use the list of countries to build a list of radio buttons to update the filter.
  • Line 32 <Charts .../> x4 - Call the Chart component one time for each chart with the appropriate props, including the filter and the Chart ID.
As you may have noticed here, I'm using the same filter fitlerCountry for all the Charts, but nothing prevents me from using a custom filter for each Chart.
You may also have noticed a very minimalistic CSS file Dashboard.css. Here it is:
1.title {
2 text-align: center;
3}
4
5.form {
6 border: solid black 1px;
7}
8
9.elem {
10 overflow: hidden;
11 display: inline-block;
12 width: 150px;
13 height: 20px;
14}
15
16.charts {
17 text-align: center;
18}
19
20.chart {
21 border: solid #589636 1px;
22 margin: 5px;
23 display: inline-block;
24}
The Chart component looks like this:
1import React, {useEffect, useRef, useState} from 'react';
2import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
3
4const Chart = ({filter, chartId, height, width}) => {
5 const sdk = new ChartsEmbedSDK({baseUrl: 'https://charts.mongodb.com/charts-open-data-covid-19-zddgb'});
6 const chartDiv = useRef(null);
7 const [rendered, setRendered] = useState(false);
8 const [chart] = useState(sdk.createChart({chartId: chartId, height: height, width: width, theme: "dark"}));
9
10 useEffect(() => {
11 chart.render(chartDiv.current).then(() => setRendered(true)).catch(err => console.log("Error during Charts rendering.", err));
12 }, [chart]);
13
14 useEffect(() => {
15 if (rendered) {
16 chart.setFilter(filter).catch(err => console.log("Error while filtering.", err));
17 }
18 }, [chart, filter, rendered]);
19
20 return <div className="chart" ref={chartDiv}/>;
21};
22
23export default Chart;
The Chart component isn't doing much. It's just responsible for rendering the Chart once when the page is loaded and reloading the chart if the filter is updated to display the correct data (thanks to React).
Note that the second useEffect (with the chart.setFilter(filter) call) shouldn't be executed if the chart isn't done rendering. So it's protected by the rendered state that is only set to true once the chart is rendered on the screen.
And voilà! If everything went as planned, you should end up with a (not very) beautiful website like this one.

Conclusion

In this blog post, your learned how to embed MongoDB Charts into a React website using the MongoDB Charts Embedding SDK.
We also learned how to create dynamic filters for the charts using useEffect().
We didn't learn how to secure the Charts with an authentication token, but you can learn how to do that in this documentation.
If you have questions, please head to our developer community website where the MongoDB engineers and the MongoDB community will help you build your next big idea with MongoDB.

Facebook Icontwitter iconlinkedin icon
Rate this tutorial
star-empty
star-empty
star-empty
star-empty
star-empty
Related
Tutorial

Learn to Build AI-Enhanced Retail Search Solutions with MongoDB and Databricks


Sep 18, 2024 | 14 min read
Tutorial

Multiple MongoDB Connections in a Single Application


Apr 02, 2024 | 10 min read
Tutorial

Building an Autocomplete Form Element with Atlas Search and JavaScript


Sep 09, 2024 | 8 min read
Article

The MongoDB Atlas Sample Datasets


Oct 01, 2024 | 8 min read
Table of Contents