Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>
<!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height:60px;width:260px;margin:0px;"></div>

CSS

body{
  background-color:#000000;
}

JavaScript

var color = "#35cb04";
var results = [
  0.030645161290322579,
  0.030322580645161287,
  0.032258064516129031,
  0.012345679012345678,
  0.0031229235880398669,
  0.0030897009966777407,
  0.000959040959040959,
  0.00093906093906093906,
  0.0019760479041916164,
  0.012222222222222221,
  0.011728395061728394,
  0.023902439024390244,
  0.023414634146341463,
  0.031935483870967743,
  1E-06,
  9.7E-07,
  9.7E-07,
  9.2999999999999988E-07,
  9.7E-07
];
var next = results[1];
var dataPoints = [];
for (var jdx = 0, len = results.length; jdx < len; jdx++) {
  if (results[jdx + 1] < results[jdx]) {
    color = "#ff0000";
  } else {
    color = "#35cb04";
  }
  dataPoints.push({
    x: jdx,
    y: results[jdx],
    lineColor: color
  });
}

var chart = new CanvasJS.Chart("chartContainer", {
  interactivityEnabled: false,
  creditText: "text",
  creditHref: "#",
  backgroundColor: null,
  axisY: {
    title: "",
    tickLength: 0,
    lineThickness: 0,
    margin: 0,
    valueFormatString: " ",
    gridThickness: 0
  },
  axisX: {
    title: "",
    tickLength: 0,
    margin: 0,
    lineThickness: 0,
    valueFormatString: " ",
    gridThickness: 0
  },

  data: [{
    type: "line",
    lineColor: "#ffffff",
    markerSize: 0,
    dataPoints: dataPoints
  }]
});

chart.render();