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=window.innerWidth height=window.innerHeight></canvas><script language="javascript">
var canvas = document.getElementById("myChart");
var data = {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: [clusterS, blackS,lenS,len1S,linecountS,contoursS,area2S,xsS,anglesS],}]};
var chartInstance = new Chart(canvas, {
type: 'bar',
data: data,
/*options: {
scales: {
yAxes: [{
ticks: {
max: 10,
min: 0,
stepSize: 1
}
}]
}
}*/
});</script></body></html>