Candlestick Chart

Basic Column Chart

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: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "Candlestick Chart"
  },
  axisY: {
      includeZero: false,
      title: "Prices",
      prefix: "$"
  },
  axisX: {
      intervalType: "day",
      interval: 1,
      valueFormatString: "MMM D"
  },
  data: [{
    type: "candlestick",
    color: "green",
    fallingColor: "#E40A0A",
    // Datapoint should be based on previous close.
    dataPoints: [
      {x: new Date(2020, 00, 06), y: [80.73, 81.48, 80.12, 80.59]},
      // Close above previous close, and went up: should be green with white filled in
      {x: new Date(2020, 00, 07), y: [80.59, 82.29, 80.34, 81.97]},
      // Went up for the day but down from previous day, so red filled in with white
      {x: new Date(2020, 00, 08), y: [81.79, 83.90, 81.78, 81.95], color: "#E40A0A"},
      // Down for the day, but up since previous day, should be green filled in with green
      // Green since it's up since previous close, and filled in since it's down for the day since open
      // Problem: only border gets set to green, inside is red
      {x: new Date(2020, 00, 09), y: [83.51, 84.49, 80.77, 82.25], color: "green"},
      // Down for the day and down from day previous day, should be red filled in with red
      {x: new Date(2020, 00, 10), y: [80.53, 80.71, 79.17, 80.19], color: "#E40A0A"}
    ]
  }]
});

chart.render();