Fix : chart.js scale dispaly bug

by SAiTO TOSHiKi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script>
<div class="container">
  <div class="chart-container">
    <canvas id="myChart1"></canvas>
  </div>
  <div class="chart-container">
    <canvas id="myChart2"></canvas>
  </div>
</div>

<button id="randomizeData">Randomize Data</button>
<script>
window.chartColors = {
	red: 'rgb(255, 99, 132)',
	orange: 'rgb(255, 159, 64)',
	yellow: 'rgb(255, 205, 86)',
	green: 'rgb(75, 192, 192)',
	blue: 'rgb(54, 162, 235)',
	purple: 'rgb(153, 102, 255)',
	grey: 'rgb(231,233,237)'
};

window.randomScalingFactor = function() {
	return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
}
</script>

CSS

canvas {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.chart-container {
  width: 500px;
  margin-left: 40px;
  margin-right: 40px;
  margin-bottom: 40px;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

JavaScript

// Chart.defaults.global.animation.duration = 1000;
Chart.defaults.global.animation.easing = 'easeInOutQuad';

var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var color = Chart.helpers.color;

var data_barRandom = {
	labels: ["January", "February", "March", "April", "May", "June", "July"],
	datasets: [{
		label: 'Dataset 1',
		backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
		borderColor: window.chartColors.red,
		borderWidth: 3,
		data: [
			randomScalingFactor(),
			randomScalingFactor(),
			randomScalingFactor(),
			randomScalingFactor(),
			randomScalingFactor(),
			randomScalingFactor(),
			randomScalingFactor()
		]
	}, {
		label: 'Dataset 2',
		backgroundColor: color(window.chartColors.orange).alpha(0.5).rgbString(),
		borderColor: window.chartColors.orange,
		borderWidth: 3,
		data: [
			randomScalingFactor(),
			randomScalingFactor(),
			randomScalingFactor(),
			randomScalingFactor(),
			randomScalingFactor(),
			randomScalingFactor(),
			randomScalingFactor()
		]
	}]

};

var config_bar = {
	type: 'bar',
	data: data_barRandom,
	options: {
		responsive: true,
		legend: {
			position: 'top',
		},
		title: {
			display: true,
			text: 'Bar'
		},
		scales: {
			xAxes: [{

				ticks: {
					min: "March",
					max: "August",
				},
				// categoryPercentage: 1,
				// barPercentage: 1,
				scaleLabel: {
					display: true,
					labelString: 'scale Label'
				},
			}],
			yAxes: [{
				position: 'right',
				ticks: {
					//min: -50,
					//max: 50,
				},
				scaleLabel: {
					display: true,
					labelString: 'scale Label'
				},
			}]

		}
	}
};

var config_horizontalBar = {
	type: 'horizontalBar',
	data: data_barRandom,
	options: {
		responsive: true,
		legend: {
			position: 'top',
		},
		title: {
			display: true,
			text: 'horizontal Bar'
		},
		scales: {
			yAxes: [{
				// position:'right',
				ticks: {
					//min: "March",
					//max:...