JSFiddle - React, Tailwind, and code Playground

HTML

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <!-- Calcite Bootstrap -->
    <link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-bootstrap.min-v0.7.css" ">

    <!-- Calcite Maps -->
    <link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-arcgis-4.x.min-v0.7.css">

    <!--<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/themes/light/main.css">-->

    <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">

    <script type="text/javascript">
        var dojoConfig = {
            has: {
                "esri-featurelayer-webgl": 1
            },
            packages: [
            {
                name: "chart",
                location: "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/"
            }]
        };
    </script>

    <script src="https://js.arcgis.com/4.9/"></script>
</head>
<body>
        <div class="map" id="viewDiv">
        </div>
</body>

JavaScript

require([
    "esri/Map",
    "esri/views/MapView",
    "esri/layers/FeatureLayer",
    "esri/layers/MapImageLayer",
    "dojo/dom",
    "dojo/dom-construct",
    "dojo/dom-attr",
    "esri/tasks/support/Query",
    "esri/identity/IdentityManager",
    "dojo/query",
    "dojo/on",


    
    "chart/Chart",
    "dojo/domReady!"



], function (
    Map, MapView, FeatureLayer, MapImageLayer, dom, domConstruct, domAttr, esriQuery, IdentityManager, query, on, Chart
) {

      // Create the map
      var map = new Map({
        basemap: "gray"
      });

      // Create the MapView
      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-73.950, 40.702],
        zoom: 11
      });
		      var template = { 
        title: "{MARRIEDRATE}",
        content: createPopup
      };

      // Reference the popupTemplate instance in the
      // popupTemplate property of FeatureLayer
      var featureLayer = new FeatureLayer({
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0",
        outFields: ["*"],
        popupTemplate: template
      });
      map.add(featureLayer);
      
      function createPopup(graphic){
        var popupElement = document.createElement("div");
        popupElement.innerHTML = "<div>Sample Location: </br> Survey:</br><div class='chartDiv'></div></div>"
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        
        var chart = new Chart(ctx, {
          // The type of chart we want to create
          type: 'line',

          // The data for our dataset
          data: {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [{
              label: "My First dataset",
              backgroundColor: 'rgb(255, 99, 132)',
              borderColor: 'rgb(255, 99, 132)',
              data: [0, 10, 5, 2, 20, 30, 45],
            }]
          },

    ...