JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="relative"><canvas id="barchart"></canvas></div>
<div class="relative"><canvas id="barchart2"></canvas></div>
<div class="relative"><canvas id="barchart3"></canvas></div>

CSS

html{
  height: 100%;
}
body{
  height: 100%;
  margin: 0px;
  background-color: #000;
}

div.relative{
  position: relative;
  display: inline-block;
}

.mycustomDomUI{
  font-family: helvetica, serif;
  position: absolute;
  left: 20px;
  right: 20px;
  top: 20px;
  bottom: 20px;
  border: solid 4px #666;
  background-color: rgba(0,0,0,0.8);
  color: #fff;
  padding: 20px;
}
.mycustomDomUI>h1{
  font-size: 15px;
  position: relative;
}
.mycustomDomUI>button{
  background-color: #666;
  color: #fff;
  border: none;
  width: 24px;
  line-height: 24px;
  padding: 0px;
  position: absolute;
  right: 0px;
  top: 0px;
  cursor: pointer
}
.mycustomDomUI>p{
  font-size: 12px;
}

canvas{ 
  margin: 0px;
  outline: none;
}
canvas#barchart{
  width: 300px;
  height: 200px;
}
canvas#barchart2{
  width: 400px;
  height: 200px;
}
canvas#barchart3{
  width: 200px;
  height: 200px;
}

JavaScript

class BarCharts3D {

	constructor(configurationData,canvasID) {

		var t = this;
    
    if(typeof(BABYLON) == 'undefined'){
    
    	console.log("BABYLON is required for BarCharts3D");
      
      return false;
    
    }

		t.configurationData = configurationData;
		t.canvasID = canvasID;
  
  	if(!document.getElementById(t.canvasID)){

			console.log("Canvas does not exists, cannot create BarCharts3D");
      
      return false;
      
		}
    
    t.canvas = document.getElementById(t.canvasID);
    
    if(configurationData.fullscreenEnabled){
    
      t.canvas.addEventListener("dblclick", (event) => {

        t.canvas.requestFullscreen();

      });
    
    }
    
    t.canvas.addEventListener("fullscreenchange", (event) => {

      if (document.fullscreenElement) {

        // entered fullscreen mode

        if(configurationData.labelMode == 2){

          for(var j=0;j<t.labels.length;j++){

            t.labels[j].color = configurationData.color;

          }

        }

        for(var j=0;j<t.labels.length;j++){

          t.labels[j].linkOffsetY = ((window.innerHeight*-0.5) * t.labels[j].percent) + 0;

          t.labels[j].fontSize = "15px";

        }


      } else {

        // Leaving fullscreen mode

        //console.log(this);
        //t._resetCamera();

        // reset the view to initial view here.

        if(configurationData.labelMode == 2){

          for(var j=0;j<t.labels.length;j++){

            t.labels[j].color = 'transparent';

          }

        }

        for(var j=0;j<t.labels.length;j++){

          t.labels[j].linkOffsetY = ((t.canvas.height*-0.5) * t.labels[j].percent) - 0;

          t.labels[j].fontSize = "10px";


        }

        t._resetCamera();


      }


    });
      
    
    
    t.engine = new BABYLON.Engine(t.canvas, true, { stencil: false, doNotHandleContextLost: false  });
    t.engine.disableManifestCheck = true;
    t.engine.enableOfflineSupport = false;
    
   ...