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 chart = new CanvasJS.Chart("chartContainer1", {
  zoomEnabled: true,
  exportEnabled: false,
  axisY: {
    reversed: true,
    tickLength: 10,
    tickColor: "transparent",
    labelAngle: 90,
  },
  axisX: {
    labelAngle: 90
  },
  data: [{
    type: "line",
    xValueType: "dateTime",
    dataPoints: [
      { x: new Date(2012, 01, 1).getTime(), y: 26},
      { x: new Date(2012, 01, 3).getTime(), y: 38},
      { x: new Date(2012, 01, 5).getTime(), y: 43},
      { x: new Date(2012, 01, 7).getTime(), y: 29},
      { x: new Date(2012, 01, 11).getTime(), y: 41},
      { x: new Date(2012, 01, 13).getTime(), y: 54},
      { x: new Date(2012, 01, 20).getTime(), y: 66},
      { x: new Date(2012, 01, 21).getTime(), y: 60},
      { x: new Date(2012, 01, 25).getTime(), y: 53},
      { x: new Date(2012, 01, 27).getTime(), y: 60},
    ]
  }, ],
});
chart.render();