Mirror Charts using Stacked Column - CanvasJS JavaScript Charts

Mirror Charts using Stacked Column - 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 chart = new CanvasJS.Chart("chartContainer", {	
    zoomEnabled: true, 
    animationEnabled: true,
    animationDuration: 2000,
	title: {
        text: "Mirror Charts"
    },
    legend: {
        verticalAlign: "bottom",
        horizontalAlign: "center",
        cursor: "pointer",
        itemclick: (e) => {
            if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                e.dataSeries.visible = false;
            } else {
                e.dataSeries.visible = true;
            }
            
            e.chart.render();
        }
    },
    axisY :{ 
        
        labelFormatter: (e) => {
            return  Math.abs(e.value);
        }
    },
      toolTip: {
        contentFormatter: function(e){
          let str = "";
          for (let i = 0; i < e.entries.length; i++){
            let  temp = `
          	<ul>
            	<li>X: ${ e.entries[i].dataPoint.x }</li>
              <li>Y: ${ Math.abs(e.entries[i].dataPoint.y) }</li>
            </ul>
          ` ; 
            str = str.concat(temp);
          }
 
          return (str);
        }
      },
    data: [{
        type: "stackedColumn",
        showInLegend: true, 
        legendText:"Income",
        dataPoints: [
            { x: 10, y: 71 },
            { x: 20, y: 55 },
            { x: 30, y: 50 },
            { x: 40, y: 65 },
            { x: 50, y: 95 }      
        ]
    },{
        type: "stackedColumn",
        showInLegend: true, 
        legendText:"Outgoing",
        dataPoints: [
            { x: 10, y: -71 },
            { x: 20, y: -55 },
            { x: 30, y: -50 },
            { x: 40, y: -65 },
            { x: 50, y: -95 }
        ]
    }]
});

chart.render();