JSFiddle - React, Tailwind, and code Playground
by Kesav Telaprolu
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://code.highcharts.com/highcharts.js"></script>
<div id = "container" style = "width: 950px; height: 600px; overflow: auto;margin:0px auto;"></div>
JavaScript
(input => {
$("#container").html(null);
// Converting decimal data to round values
for(var t=0;t<input.dataSeries.length;t++)
{
for(var u=0;u<input.dataSeries[t].data.length;u++)
{
input.dataSeries[t].data[u] = Math.round(input.dataSeries[t].data[u]);
}
}
var dataArray=[];
var dataMaxValue=[];
var yAxisArray=[];
// Calculating max value in the input data
for(var v=0;v<input.dataSeries.length;v++)
{
dataArray = input.dataSeries[v].data.slice();
if(dataArray[2] > dataArray[1])
{
yAxisArray.push(dataArray[0] + dataArray[2]);
}
else
{
yAxisArray.push(dataArray[0] + dataArray[1]);
}
dataArray.sort(function(a, b){return b - a});
dataMaxValue.push(dataArray[0]);
}
dataMaxValue.sort(function(a, b){return b - a});
yAxisArray.sort(function(a, b){return b - a});
function wraptext( context , text, x, y, lineHeight, fitWidth)
{
fitWidth = fitWidth || 0;
if (fitWidth <= 0)
{
context.fillText( text, x, y );
return;
}
for (var idx = 1; idx <= text.length; idx++)
{
var str = text.substr(0, idx);
if (context.measureText(str).width > fitWidth)
{
context.fillText( text.substr(0, idx-1), x, y );
wraptext(context, text.substr(idx-1), x, y + lineHeight, lineHeight, fitWidth);
return;
}
}
context.fillText( text, x, y );
}
function imageUrl(val)
{
var url;
if(val.toLowerCase()=="Stars".toLowerCase())
{
url = input.classificationIcons[0]+"~Star";
}
else if(val.toLowerCase()=="Stop".toLowerCase())
{
url = input.classificationIcons[1]+"~Stop";
}
else if(val.toLowerCase()=="Radical".toLowerCase())
{
url =...