normal example

by UTree

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var clusterS = 10;
var blackS = 20;
var lenS = 30;
var len1S = 40;
var linecountS = 50;
var contoursS = 60;
var area2S = 70;
var xsS = 80;
var anglesS = 90;
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: [clusterS, blackS, lenS, len1S, linecountS, contoursS, area2S, xsS, anglesS],}]};
var myChart = new Chart(ctx, {

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