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>

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: {
						callbacks: {
                label: function(tooltipItem, data) {
                    var label = data.datasets[tooltipItem.datasetIndex].label || '';

                    if (label) {
                        label += ': ';
                    }
                    label += Math.round(tooltipItem.yLabel * 100) / 100;
                    return label;
                }
            }
					},
					responsive: true,
					scales: {
						xAxes: [{
							stacked: true,
						}],
						yAxes: [{
							stacked: true
						}]
					}
				}
			});