JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://www.amcharts.com/lib/4/core.js?ver=5.5.3"></script>
<script src="https://www.amcharts.com/lib/4/charts.js?ver=5.5.3"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js?ver=5.5.3"></script>
<div id="chartdiv">
</div>
JavaScript
var graphObjects = [{
"Company": "Coles Group Ltd...",
"Score": 46,
"Average": "49",
"Market": 12,
"lineColor": "#000",
"dataURL": "https://ktccidtdsdev.wpengine.com/company/coles-group-ltd/",
"fullName": "Coles Group Ltd."
}, {
"Company": "Woolworths Grou...",
"Score": 52,
"Average": "49",
"Market": 27,
"lineColor": "#000",
"dataURL": "https://ktccidtdsdev.wpengine.com/company/woolworths-group-ltd/",
"fullName": "Woolworths Group Ltd."
}, {
"AVERAGE_SCORE": "49"
}];
var cellSize = 35; // Size of the bars in pixels
// Function to generate the graphic with am4charts
// Get the Avegrage Score to the SVG
function load_average_score(graphObjects) {
let response = graphObjects[Object.keys(graphObjects)[Object.keys(graphObjects).length - 1]];
let newScore = response['AVERAGE_SCORE'];
let percentageScore = 0;
if (isNaN(newScore)) {
newScore = 0;
}
if (newScore == 0) {
percentageScore = 0;
}
if ((newScore > 0) && (newScore < 5)) {
percentageScore = 5;
}
if ((newScore >= 5) && (newScore < 10)) {
percentageScore = 10;
}
if ((newScore >= 10) && (newScore < 15)) {
percentageScore = 15;
}
if ((newScore >= 15) && (newScore < 20)) {
percentageScore = 20;
}
if ((newScore >= 20) && (newScore < 25)) {
percentageScore = 25;
}
if ((newScore >= 25) && (newScore < 30)) {
percentageScore = 25;
}
if ((newScore >= 30) && (newScore < 35)) {
percentageScore = 30;
}
if ((newScore >= 35) && (newScore < 40)) {
percentageScore = 35;
}
if ((newScore >= 40) && (newScore < 45)) {
percentageScore = 40;
}
if ((newScore >= 45) && (newScore < 50)) {
percentageScore = 45;
}
if ((newScore >= 50) && (newScore < 55)) {
percentageScore = 50;
}
if ((newScore >= 55) && (newScore < 60)) {
percentageScore = 55;
}
if ((newScore >= 60) && (newScore < 65)) {
percentageScore = 60;
}
if ((newScore >= 65) && (newScore < 70)) {
percentageScore = 65;
}
...