JSFiddle - React, Tailwind, and code Playground

by jonahe

HTML

<script src="https://unpkg.com/@mongodb-js/charts-embed-dom"></script>
<label for="toggleArchived">show archived only</label>
<input type="checkbox" id="toggleArchived" />

<div id="chart"></div>

CSS

body {
  background: yellow;
}

JavaScript

const sdk = new ChartsEmbedSDK({
  baseUrl: "https://charts.mongodb.com/charts-project-0-jfssq"
});

const chart = sdk.createChart({
  chartId: "515553c7-5435-45ce-a87d-51e50e1db27d",
  background: "transparent",
  height: "700px",
	filter: {
  	//"quidditySession_lookup": { "code": { $in: ["DUACDK"] } }
    }
});


  chart.render(document.getElementById("chart")).then(() => {
  	const archivedToggle = document.getElementById("toggleArchived");
    archivedToggle.onclick = function() {
    	const value = this.checked;
      chart.setFilter({archived: value});
    }
  })