Inver fill Area in Area Chart - CanvasJS JavaScript Charts

Inver fill Area in Area Chart - CanvasJS JavaScript Charts

by canvasjs

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: "Inverting the Fill Area"
     },       	  
    data: [
    {
      type: "area",
      dataPoints: [//array

        { x: new Date(2012, 00, 1), y: -26 },
        { x: new Date(2012, 01, 1), y: -38 },
        { x: new Date(2012, 02, 1), y: -43 },
        { x: new Date(2012, 03, 1), y: -29 },
        { x: new Date(2012, 04, 1), y: -41 },
        { x: new Date(2012, 05, 1), y: -45 },
        { x: new Date(2012, 06, 1), y: -86 },
        { x: new Date(2012, 07, 1), y: -64 },
        { x: new Date(2012, 08, 1), y: -53 },
        { x: new Date(2012, 09, 1), y: -60 }
      ]
    }]
});

invert(chart);
chart.render();

// Changes dataPoint's y values and 
function invert(chart){
  
  //Invert DataPoint Y Values.
	for(var i = 0; i < chart.options.data[0].dataPoints.length; i++){
    chart.options.data[0].dataPoints[i].y += + 100;
  }
  
  //Invert Y Axis Labels
  if(!chart.options.axisY)
    chart.options.axisY = {};
  
  chart.options.axisY.labelFormatter = function (e) {
    return (e.value) - 100;  
  };
  
  //Invert ToolTip Values
  if(!chart.options.toolTip)
    chart.options.toolTip = {};
  
  chart.options.toolTip.contentFormatter = function(e){
    var content = " ", entry;
    
    for (var i = 0; i < e.entries.length; i++) {
      entry = e.entries[i];
      content += CanvasJS.formatDate(entry.dataPoint.x, "MMM DD : ");          

      content += " " + "<strong>" + (entry.dataPoint.y - 100) + "</strong>";
    }
    return content;
  }  
}