HTML5 & JS Box and Whisker Chart - 0 | JSFiddle Sample Code

HTML5 & JS Box and Whisker Chart - 0 | JSFiddle Sample Code

HTML

<div id="chartContainer"></div>
<script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>

CSS

#chartContainer{
  height: 600px;
  width: 360px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  margin: auto 600px;
  transform-origin: left top;
}

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

JavaScript

window.onload = function () {

	var chart = new CanvasJS.Chart("chartContainer", {
			title: {
				text: "Energy Consumption",
				horizontalAlign: "left",
    		verticalAlign: "center"
			},
			axisX: {
					labelAngle: -90 
			},

			axisY2: {
					labelAngle: -90
			},

			data: [{
					type: "boxAndWhisker",
					axisYType: "secondary",

					dataPoints: [
							{ label: "Oven", y: [4, 6, 8, 9, 7] },
							{ label: "Microwave", y: [5, 6, 7, 8, 6.5] },
							{ label: "PC & Peripherals", y: [6, 8, 10, 11, 9.5] },
							{ label: "Air Conditioner", y: [8, 9, 13, 14, 10.5] },
							{ label: "Dishwasher", y: [5, 7, 9, 12, 7.5] },
							{ label: "Shaver", y: [2, 3, 4, 6, 3.5] },
							{ label: "Electric Kettle", y: [4, 6, 8, 9, 7] },
							{ label: "Fridge", y: [8, 9, 12, 13, 11] }
					]
			}]
	});

	chart.render();

}