Column Chart with minimum/maximum- CanvasJS JavaScript HTML5 Charts

Column Chart with minimum/maximum- CanvasJS JavaScript HTML5 Charts

by Khanh Le

HTML

<script src="http://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: "Plotting Interval Issue in CanvasJS"
  },
  axisY:[{
    minimum: -2100,
    maximum: 10236,
    interval: 3003,
  },],
  axisY2: [
  {
    minimum: -2100,
    maximum: 10236,
    interval: 3003,
  }
  ],
  data: [
    {
    // Change type to "doughnut", "line", "splineArea", etc.
    type: "column",
      dataPoints: [
        { label: "apple", y: 8897.10 },
        { label: "orange", y: 2608.39 },
        { label: "banana", y: -2088.73 },
        { label: "mango", y: 1971.12 },
        { label: "watermelon", y: 1971.12 },
        { label: "grape", y: 138.52 },
        { label: "carrot", y: -615.21 },
        { label: "lemon", y: -991.10 }
      ]
    }
  ]
});

chart.render();