Position axisX to center of Chart Workaround - CanvasJS JavaScript Charts

Position axisX to center of Chart Workaround - 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="chartContainer1" style="height: 360px; width: 100%;"></div>

JavaScript

var chart1 = new CanvasJS.Chart("chartContainer1", {	
  title: {
    text: "Position axisX to center of Chart"
  },
  data: [
    {
      type: "column",
      dataPoints: [       
        { x: 10, y: 68},
        { x: 20, y: -28 },
        { x: 30, y: 34 },
        { x: 40, y: -14 },
        { x: 50, y: 38 },
        { x: 60, y: -40 },
        { x: 70, y: 34 },
        { x: 80, y: -70 },
        { x: 90, y: 34 },
        { x: 100, y: -70 }
        
      ]
    }					
  ]
});

chart1.render();
moveAxisToCenter(chart1);


function moveAxisToCenter(chart1) {		
  $("#chartContainer1").css("position", "absolute")
  $("<div id='chartContainer2' style = 'width: 100%; height: 40px';></div>").insertAfter($("#chartContainer1"));
	
	chart1.axisX[0].set("labelFormatter", function(){ return ""}, false);
	chart1.axisX[0].set("lineThickness", 0, false);
  chart1.axisX[0].set("tickLength", 0, false);
  chart1.set("backgroundColor", "transparent");  
  
  var chart2 = new CanvasJS.Chart("chartContainer2", {
  title: {
    text: ".",
    fontColor: "transparent"
  },
  backgroundColor: "transparent",
  axisX: {    
    interval:chart1.axisX[0].get("interval"),
    labelAngle: chart1.axisX[0].get("labelAngle"),
    labelFontSize: chart1.axisX[0].get("labelFontSize"),
    labelMaxWidth: chart1.axisX[0].get("labelMaxWidth"),
    viewportMinimum: chart1.axisX[0].get("viewportMinimum"),
    viewportMaximum: chart1.axisX[0].get("viewportMaximum")    
  },
  axisY: {
  	margin: chart1.axisY[0].bounds.width + chart1.axisX[0].bounds.x1
  },
  data: [
    {
      type: "column"
    }
  ]
});

chart2.render();
$("#chartContainer2").css("margin-top", chart1.axisY[0].convertValueToPixel(0)  - chart2.axisX[0].bounds.y1 + "px");

if(chart1.title.text)
  chart2.title.set("fontSize", chart1.title.get("fontSize"));
else
  chart2.title.set("fontSize", 0);
//chart2.render();
}