Horizontal Box and Whisker Chart - CanvasJS JavaScript Charts

Horizontal Box and Whisker Chart - 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"></div>

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

var chart = new CanvasJS.Chart("chartContainer", {
	title: {
  	text: "Horizontal Box & Whisker Chart",
    horizontalAlign: "left",
    verticalAlign: "center"
  },
	axisX: {
  	labelAngle: -90
  },
	axisY2: {
  	labelAngle: -90
  },
	data: [
	{
		type: "boxAndWhisker",
		xValueFormatString: "DDDD",
		yValueFormatString: "#0.0 Hours",
    axisYType: "secondary",
		dataPoints: [
			{ x: new Date(2017, 6, 3),  y: [4, 6, 8, 9, 7] },
			{ x: new Date(2017, 6, 4),  y: [5, 6, 7, 8, 6.5] },
			{ x: new Date(2017, 6, 5),  y: [4, 5, 7, 8, 6.5] },
			{ x: new Date(2017, 6, 6),  y: [3, 5, 6, 9, 5.5] },
			{ x: new Date(2017, 6, 7),  y: [6, 8, 10, 11, 8.5] },
			{ x: new Date(2017, 6, 8),  y: [5, 7, 9, 12, 7.5] },
			{ x: new Date(2017, 6, 9),  y: [4, 6, 8, 9, 7] }
		]
	}					
	]
});

chart.render();