JSFiddle - React, Tailwind, and code Playground

HTML

<div id='container'></div>

JavaScript

require([
              "dojox/charting/Chart",
              "dojox/charting/themes/MiamiNice",
              "dojox/charting/plot2d/Bubble",
              "dojox/charting/plot2d/Markers",
              "dojox/charting/axis2d/Default",
              "dojo/domReady!"
            ],function(Chart,theme){
             var d1 = [];
             var vs=[1998,2000,2005,2006];
             for (var i = 0; i <= 4; i += 1){
                d1.push({x: vs[i], y: parseInt(Math.random() * 50), size: 5});
                 // or you can put "size:1" for simplicity
             }
             var chart = new Chart("container");
             chart.addPlot("default", {
                 type:"Bubble",    hAxis: "x",   
                vAxis: "y"
             });
             chart.addAxis("x", {  
                title:"Rates by Year",  
                titleOrientation:"away",  
                labels: vs,  
                   fixLower: "major",   
                fixUpper: "major", 
                font: "normal normal normal 9pt Arial",   
                });
              chart.addAxis("y", {  
                title:"rateNote",   
                vertical: true,   
                fixLower: "major",   
                fixUpper: "major",   
                min: 0,  
                max: "500",             
                minorTicks: false,   
                minorLabels: true});

             // Add the series of data
             chart.addSeries("Demo", d1,{ stroke: { color: "red", width: 1 }});
             chart.render();
            });