jQuery addClass example

Change class name on click in jQuery

by Hoang Hiếu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="http://www.chartjs.org/samples/latest/utils.js"></script>
<div style="width: 75%">
		<canvas id="canvas"></canvas>
	</div>
  
	<button id="randomizeData">Randomize Data</button>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

var barChartData = {
			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
			datasets: [{
				label: 'Dataset 1',
				backgroundColor: window.chartColors.red,
				data: [
					randomScalingFactor(),
					null,
					null,
					null,
					null,
					null,
					null
				]
			}, {
				label: 'Dataset 2',
				backgroundColor: window.chartColors.blue,
				data: [
					randomScalingFactor(),
					null,
					null,
					null,
					null,
					null,
					null
				]
			}, {
				label: 'Dataset 3',
				backgroundColor: window.chartColors.green,
				data: [
					null,
					randomScalingFactor(),
					null,
					null,
					null,
					null,
					null
				]
			}, {
				label: 'Dataset 4',
				backgroundColor: window.chartColors.green,
				data: [
					null,
					null,
					randomScalingFactor(),
					null,
					null,
					null,
					null
				]
			}]

		};
			var ctx = document.getElementById('canvas').getContext('2d');
			window.myBar = new Chart(ctx, {
				type: 'bar',
				data: barChartData,
				options: {
					title: {
						display: true,
						text: 'Chart.js Bar Chart - Stacked'
					},
					tooltips: {
						mode: 'index',
						intersect: false
					},
					responsive: true,
					scales: {
						xAxes: [{
							stacked: true,
						}],
						yAxes: [{
							stacked: true
						}]
					}
				}
			});