JSFiddle - React, Tailwind, and code Playground

HTML

/*Ext.require( [ 'Ext.data.*' ]);
Ext.require('Ext.chart.*');
Ext
		.require( [ 'Ext.Window', 'Ext.fx.target.Sprite',
				'Ext.layout.container.Fit' ]);*/

/* Global Parameters */





var chart = {
	minimum : 0,
	maximum: 5,
	quadrantstrong : 'Strong',
	quadrantmoderatex : 'Moderate',
	quadrantmoderatey : 'Moderate',
	quadrantweak : 'Weak',
	type : 'ext'
}

/* Do Not Edit Below This */
var charts = [];
function Chart(config) {
	this.container = document.getElementById(config.container);
	this.minimum = config.minimum ? config.minimum : chart.minimum;
	this.maximum = config.maximum ? config.maximum : chart.maximum;
	this.dimension = (this.maximum - this.minimum) + 1;
	this.quadrantstrong = config.quadrant && config.quadrant.strong ? config.quadrant.strong
			: chart.quadrantstrong;
	this.quadrantmoderatex = config.quadrant && config.quadrant.moderatex ? config.quadrant.moderatex
			: chart.quadrantmoderatex;
	this.quadrantmoderatey = config.quadrant && config.quadrant.moderatey ? config.quadrant.moderatey
			: chart.quadrantmoderatey;
	this.quadrantweak = config.quadrant && config.quadrant.weak ? config.quadrant.weak
			: chart.quadrantweak;
	this.url = config.url;
	this.mode = config.mode;
	this.title = config.title;
	this.segmentsblockx = this.segmentsblocky = this.data = this.chartcell = null;
	this.cells = new Array();
	this.onsave = config.onsave;
	this.onselect = config.onselect;
	this.type = config.type ? config.type : chart.type;
	this.paint = function() {
		this.container.className += ' maincontainer';
		this.container.innerHTML = '<img class="chartloading" id="chartloading" src='+getImagePathByLocale("/newimages/misc/hb_loading_crop.gif")+' style="text-align: center;">';
		var chartcontainer = document.createElement("table");
		this.container.appendChild(chartcontainer);
		chartcontainer.className = 'chartcontainer';
		chartcontainer.style.visibility = this.url ? 'hidden' : '';
		var row = chartcontainer.insertRow(0);
		var cell =...

JavaScript

/*Ext.require( [ 'Ext.data.*' ]);
Ext.require('Ext.chart.*');
Ext
		.require( [ 'Ext.Window', 'Ext.fx.target.Sprite',
				'Ext.layout.container.Fit' ]);*/

/* Global Parameters */





var chart = {
	minimum : 0,
	maximum: 5,
	quadrantstrong : 'Strong',
	quadrantmoderatex : 'Moderate',
	quadrantmoderatey : 'Moderate',
	quadrantweak : 'Weak',
	type : 'ext'
}

/* Do Not Edit Below This */
var charts = [];
function Chart(config) {
	this.container = document.getElementById(config.container);
	this.minimum = config.minimum ? config.minimum : chart.minimum;
	this.maximum = config.maximum ? config.maximum : chart.maximum;
	this.dimension = (this.maximum - this.minimum) + 1;
	this.quadrantstrong = config.quadrant && config.quadrant.strong ? config.quadrant.strong
			: chart.quadrantstrong;
	this.quadrantmoderatex = config.quadrant && config.quadrant.moderatex ? config.quadrant.moderatex
			: chart.quadrantmoderatex;
	this.quadrantmoderatey = config.quadrant && config.quadrant.moderatey ? config.quadrant.moderatey
			: chart.quadrantmoderatey;
	this.quadrantweak = config.quadrant && config.quadrant.weak ? config.quadrant.weak
			: chart.quadrantweak;
	this.url = config.url;
	this.mode = config.mode;
	this.title = config.title;
	this.segmentsblockx = this.segmentsblocky = this.data = this.chartcell = null;
	this.cells = new Array();
	this.onsave = config.onsave;
	this.onselect = config.onselect;
	this.type = config.type ? config.type : chart.type;
	this.paint = function() {
		this.container.className += ' maincontainer';
		this.container.innerHTML = '<img class="chartloading" id="chartloading" src='+getImagePathByLocale("/newimages/misc/hb_loading_crop.gif")+' style="text-align: center;">';
		var chartcontainer = document.createElement("table");
		this.container.appendChild(chartcontainer);
		chartcontainer.className = 'chartcontainer';
		chartcontainer.style.visibility = this.url ? 'hidden' : '';
		var row = chartcontainer.insertRow(0);
		var cell =...