JSFiddle - React, Tailwind, and code Playground

by UTree

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<html><head><title>Results</title><script type="text/javascript" src ="Chart.js"></script></head><body style="background-color:#ffffff;"><canvas id="myChart" width="300" height="300"></canvas><script language="javascript">
var clusterS = 1; 
var blackS = 2; 
var lenS = 3; 
var len1S = 4; var linecountS = 2; 
var contoursS = 6; 
var area2S = 8; 
var xsS = 10; 
var anglesS = 7;

var ctx = document.getElementById("myChart");

var dataa = {labels: ["Density", "Black", "Length", "Width", "Lines", "Contours", "Area","Pointedness","Geometry"],datasets: [{label: "Analysis Results",backgroundColor: ["rgba(255,99,132,1)","rgba(54, 162, 235, 1)","rgba(255, 206, 86, 1)","rgba(75, 192, 192, 1)","rgba(153, 102, 255, 1)","rgba(255, 159, 64, 1)","rgba(159, 255, 64, 1)","rgba(64, 159, 255, 1)","rgba(255, 64, 159, 1)"],borderColor: ["rgba(255,99,132,1)","rgba(54, 162, 235, 1)","rgba(255, 206, 86, 1)","rgba(75, 192, 192, 1)","rgba(153, 102, 255, 1)","rgba(255, 159, 64, 1)","rgba(159, 255, 64, 1)","rgba(64, 159, 255, 1)","rgba(255, 64, 159, 1)"],borderWidth: 1,data: [pval(clusterS), pval(blackS),pval(lenS), pval(len1S), pval(linecountS), pval(contoursS), pval(area2S), pval(xsS), pval(anglesS)],}]};
function pval(x){
return Math.pow(Math.E,-1/Math.sqrt(2*Math.PI)*Math.pow(x,2)/2);
}
var myChart = new Chart(ctx, {

    type: 'bar',
    data:dataa,
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true,
                    max: 1,
                    min: 0,
                    stepSize:0.05,
                }
            }]
        }
    }
});
</script>