Align axisX of Multiple Bar Charts in a Straight Line - CanvasJS JavaScript Charts

Align axisX of Multiple Bar Charts in a Straight Line - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer1" style="height: 300px; width: 100%; position: relative;"></div> <br/>
<div id="chartContainer2" style="height: 300px; width: 100%; position: relative;"></div>

JavaScript

var chart1 = new CanvasJS.Chart("chartContainer1", {
		title:{
			text: "Chart 1 "
		},
		data: [              
		{			
			type: "bar",
			dataPoints: [
				{ label: "Apple", y: 171 },
        { label: "Mango", y: 155 },
        { label: "Pineapple", y: 150 },
        { label: "Grape", y: 165 },
        { label: "Orange", y: 195 }
			]
		}
		]
	});

var chart2 = new CanvasJS.Chart("chartContainer2", {
		title:{
			text: "Chart 2"
		},
		data: [              
		{			
			type: "bar",
			dataPoints: [
				{ label: "A", y: 71 },
        { label: "B", y: 55 },
        { label: "C", y: 50 },
        { label: "D", y: 65 },
        { label: "E", y: 95 }
			]
		}
		]
	});
  
chart1.render();
  
chart2.render();
chart2.axisX[0].set("margin", chart1.axisX[0].bounds.x2 - (chart2.axisX[0].bounds.x2 - chart2.axisX[0].bounds.x1));