Stepline Chart with rotated div - CanvasJS JavaScript Charts

Stepline Chart with rotated div - 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="chartContainer" style="height: 400px; width: 50%;"></div>

CSS

#chartContainer {
/* Safari */
-webkit-transform: rotate(90deg);
/* Firefox */
-moz-transform: rotate(90deg);
/* IE */
-ms-transform: rotate(90deg);
/* Opera */
-o-transform: rotate(90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.canvasjs-chart-tooltip{
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

JavaScript

var chart= new CanvasJS.Chart("chartContainer", {
			title:{
        text:"StepLine Chart",
        verticalAlign:"center",
        horizontalAlign:"left"
      },
			axisY2:{
      	labelAngle: -89,
        gridThickness:0
      },
      axisX: {
        labelAngle: -89,
        gridThickness:2
      },

      data: [
      {
       type: "stepLine",  
       axisYType:"secondary",
       dataPoints: [

       { x: new Date(2008,02), y: 15.00 },
       { x: new Date(2008,03), y: 20.50 },
       { x: new Date(2008,04), y: 18.00 },
       { x: new Date(2008,05), y: 12.50 },
       { x: new Date(2008,06), y: 17.75 },
       { x: new Date(2008,07), y: 19.30 },
       { x: new Date(2008,08), y: 12.80 },
       { x: new Date(2008,09), y: 17.50 }
       ]
     },
     {
       type: "stepLine",  
       axisYType: "secondary",
       dataPoints: [
       { x: new Date(2008,02), y: 41.00 },
       { x: new Date(2008,03), y: 42.50 },
       { x: new Date(2008,04), y: 41.00 },
       { x: new Date(2008,05), y: 45.30 },
       { x: new Date(2008,06), y: 47.55 },
       { x: new Date(2008,07), y: 45.00 },
       { x: new Date(2008,08), y: 40.70 },
       { x: new Date(2008,09), y: 37.00 }
       ]
     }
     ]
   });
chart.render();