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

JavaScript

var waterfallData = [{
  type: "waterfall",
  indexLabel: "{y}",
  indexLabelFontFamily: "'Open Sans', 'arial'",
  indexLabelPlacement: "outside",
  yValueFormatString: "$#,##0",
  risingColor: "green",
  fallingColor: "red",
  dataPoints: [
    {label: 'Total Pre-Period $ Sales', y: 7793957, color: "purple"},
    {label: "Net New/Lost to Category $ Sales", y: -94764},
    {label: "Net Increased/Decreased Category Consumption $ Sales", y: -102198},
    {label: "Net Shifting Gained/Lost $ Sales", y: 165957},
    {label: "Total Post-Period $ Sales", isCumulativeSum: true, color: "purple"}
  ]
}]

var chart = new CanvasJS.Chart("chartContainer", {
  data: waterfallData,
  animationEnabled: true,
  axisY:{
    valueFormatString: "#,##0",
    prefix:"$",
    gridThickness: 0,
    maximum: 8300000
  },
  axisX:{
    labelAngle: 0,
    tickThickness: 0,
    tickLength: 10
  }
});
chart.render();