Combining Bar Chart with Line Chart - Workaround using Column + Line Charts - CanvasJS JavaScript Charts

Combining Bar Chart with Line Chart - Workaround using Column + Line Charts - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div>
    <div id="chartContainer" class="rotate" style="height: 550px; width: 360px;"></div>
</div>

CSS

.rotate{
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    position:relative;
    left: 100px;
}

.canvasjs-chart-tooltip{
    -moz-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);    
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
 	title: {
		text: "Combining Bar and Line",    
    horizontalAlign: "left",
    verticalAlign: "center"
  },      
	axisX:{
		labelAngle: -90,
    reversed: true
	},
	axisY2:{
		labelAngle: -90,
    maximum: 103
	},
	data: [
	{
		type: "column",
    axisYType: "secondary",
		dataPoints: [
			{ x: 1, y: 71 },
			{ x: 2, y: 55 },
			{ x: 3, y: 50 },
			{ x: 4, y: 65 },
			{ x: 5, y: 95 },
			{ x: 6, y: 68 },
			{ x: 7, y: 28 },
			{ x: 8, y: 34 },
			{ x: 9, y: 14 }
		]
	},
	{
		type: "line",
		axisYType: "secondary",
		dataPoints: [
			{ x: 1, y: 71 },
			{ x: 2, y: 55 },
			{ x: 3, y: 50 },
			{ x: 4, y: 65 },
			{ x: 5, y: 95 },
			{ x: 6, y: 68 },
			{ x: 7, y: 28 },
			{ x: 8, y: 34 },
			{ x: 9, y: 14 }
		]
	}
	]    
});

chart.render();