Non Criping - Bar Line chart

by SAiTO TOSHiKi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script>
<body>
  <div class="container">
    <div class="chart-container">
      <canvas id="myChart1"></canvas>
    </div>
    <div class="chart-container">
      <canvas id="myChart2"></canvas>
    </div>
    <div class="chart-container">
      <canvas id="myChart3"></canvas>
    </div>
    <div class="chart-container">
      <canvas id="myChart4"></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

.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;


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 - min max option'
		},
		scales: {
			xAxes: [{
				ticks: {
					min: "March",
					max: "August",
				},
				// categoryPercentage: 1,
				// barPercentage: 1,
			}],
			yAxes: [{
				ticks: {
					min: -50,
					max: 50,
				},
			}]

		}
	}
};

var config_horizontalBar = {
	type: 'horizontalBar',
	data: data_barRandom,
	options: {
		responsive: true,
		legend: {
			position: 'top',
		},
		title: {
			display: true,
			text: 'horizontal Bar - min max option'
		},
		scales: {
			yAxes: [{
				ticks: {
					min: "March",
					max: "August",
				},
				// categoryPercentage: 1,
				// barPercentage: 1,
			}],
			xAxes: [{
				ticks: {
					min: -50,
					max: 50,
				},
			}]

		}
	}
};



//-----------------------------------


var data_line2 =  {
		labels:...