Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

by mdrobinson0124

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,
  },
  axisX:{
  	labelAngle: 0,
    tickThickness: 0,
    tickLength: 10
	},
});

chart.render();