JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="container" style="width; 90%; height: 400px;">
  <div id="chartContainer1" style="width:400px;"></div>
</div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>

CSS

#container {
 overflow: hidden; 
}
.canvasjs-chart-tooltip {
  transform: rotate(90deg);
}

JavaScript

var chartContainer = jQuery('#chartContainer1');

function setContainerDimension() {
	chartContainer.height(jQuery('#container').width());
  var height = chartContainer.height();
  var width = chartContainer.width();
  chartContainer.css({ 'transform' : 'rotate(270deg) translate('+((height-width)/2)+'px, '+((height-width)/2)+'px)'});
}

setContainerDimension();

jQuery(window).on('resize', function() {{
	setContainerDimension();
}})



var dPoints = [];

var chart = new CanvasJS.Chart("chartContainer1", {
  axisX2: {
      labelAngle: 90
  },
  axisY: {
  	reversed: true,
    labelAngle: 90
  },
  data: [
  {
    type: "column",
    axisXType: "secondary",
    dataPoints: [
				{ label: "apple",  y: 10  },
				{ label: "orange", y: 15  },
				{ label: "banana", y: 25  },
				{ label: "mango",  y: 30  },
				{ label: "grape",  y: 28  }
			],
  },
  {
    type: "line",
    axisXType: "secondary",
    dataPoints: [
				{ label: "apple",  y: 10  },
				{ label: "orange", y: 15  },
				{ label: "banana", y: 25  },
				{ label: "mango",  y: 30  },
				{ label: "grape",  y: 28  }
			],
  }, 
  ],
});
chart.render();