duration: 20000
ttl: 60000
refresh: 1000
delay: 2000
frameRate: 30
pause: false
var isIE = navigator.userAgent.indexOf('MSIE') !== -1 || navigator.userAgent.indexOf('Trident') !== -1;

var 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(201, 203, 207)'
};

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

function onRefresh(chart) {
	chart.config.data.datasets.forEach(function(dataset) {
		dataset.data.push({
			x: Date.now(),
			y: randomScalingFactor()
		});
	});
}

var color = Chart.helpers.color;
var config = {
	type: 'line',
	data: {
		datasets: [{
			label: 'Dataset 1 (linear interpolation)',
			backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
			borderColor: chartColors.red,
			fill: false,
			lineTension: 0,
			borderDash: [8, 4],
			data: []
		}, {
			label: 'Dataset 2 (cubic interpolation)',
			backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
			borderColor: chartColors.blue,
			fill: false,
			cubicInterpolationMode: 'monotone',
			data: []
		}]
	},
	options: {
		title: {
			display: true,
			text: 'Interactions sample'
		},
		scales: {
			xAxes: [{
				type: 'realtime',
				realtime: {
					duration: 20000,
					ttl: 60000,
					refresh: 1000,
					delay: 2000,
					pause: false,
					onRefresh: onRefresh
				}
			}],
			yAxes: [{
				type: 'linear',
				display: true,
				scaleLabel: {
					display: true,
					labelString: 'value'
				}
			}]
		},
		tooltips: {
			mode: 'nearest',
			intersect: false
		},
		hover: {
			mode: 'nearest',
			intersect: false
		},
		plugins: {
			streaming: {
				frameRate: 30
			}
		}
	}
};

window.onload = function() {
	var ctx = document.getElementById('myChart').getContext('2d');
	window.myChart = new Chart(ctx, config);
};

document.getElementById('randomizeData').addEventListener('click', function() {
	config.data.datasets.forEach(function(dataset) {
		dataset.data.forEach(function(dataObj) {
			dataObj.y = randomScalingFactor();
		});
	});

	window.myChart.update();
});

var colorNames = Object.keys(chartColors);
document.getElementById('addDataset').addEventListener('click', function() {
	var colorName = colorNames[config.data.datasets.length % colorNames.length];
	var newColor = chartColors[colorName];
	var newDataset = {
		label: 'Dataset ' + (config.data.datasets.length + 1),
		backgroundColor: color(newColor).alpha(0.5).rgbString(),
		borderColor: newColor,
		fill: false,
		lineTension: 0,
		data: []
	};

	config.data.datasets.push(newDataset);
	window.myChart.update();
});

document.getElementById('removeDataset').addEventListener('click', function() {
	config.data.datasets.pop();
	window.myChart.update();
});

document.getElementById('addData').addEventListener('click', function() {
	onRefresh(window.myChart);
	window.myChart.update();
});

document.getElementById('duration').addEventListener(isIE ? 'change' : 'input', function() {
	config.options.scales.xAxes[0].realtime.duration = +this.value;
	window.myChart.update({duration: 0});
	document.getElementById('durationValue').innerHTML = this.value;
});

document.getElementById('ttl').addEventListener(isIE ? 'change' : 'input', function() {
	config.options.scales.xAxes[0].realtime.ttl = +this.value;
	window.myChart.update({duration: 0});
	document.getElementById('ttlValue').innerHTML = this.value;
});

document.getElementById('refresh').addEventListener(isIE ? 'change' : 'input', function() {
	config.options.scales.xAxes[0].realtime.refresh = +this.value;
	window.myChart.update({duration: 0});
	document.getElementById('refreshValue').innerHTML = this.value;
});

document.getElementById('delay').addEventListener(isIE ? 'change' : 'input', function() {
	config.options.scales.xAxes[0].realtime.delay = +this.value;
	window.myChart.update({duration: 0});
	document.getElementById('delayValue').innerHTML = this.value;
});

document.getElementById('frameRate').addEventListener(isIE ? 'change' : 'input', function() {
	config.options.plugins.streaming.frameRate = +this.value;
	window.myChart.update({duration: 0});
	document.getElementById('frameRateValue').innerHTML = this.value;
});

document.getElementById('pause').addEventListener('change', function() {
	config.options.scales.xAxes[0].realtime.pause = this.checked;
	window.myChart.update({duration: 0});
	document.getElementById('pauseValue').innerHTML = this.checked;
});
<head>
	<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/min/moment.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
	<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.8.0"></script>
	<style>
		.label {
			display: inline-block;
			text-align: right;
			width: 90px;
		}
		.value {
			display: inline-block;
			text-align: left;
			width: 60px;
		}
		.control {
			width: 200px;
		}
	</style>
</head>
<body>
	<div>
		<canvas id="myChart"></canvas>
	</div>
	<p>
		<button id="randomizeData">Randomize Data</button>
		<button id="addDataset">Add Dataset</button>
		<button id="removeDataset">Remove Dataset</button>
		<button id="addData">Add Data</button>
	</p>
	<div>
		<span class="label">duration:</span>
		<span id="durationValue" class="value">20000</span>
		<span><input type="range" min="1000" max="60000" step="100" value="20000" id="duration" class="control"></span>
	</div>
	<div>
		<span class="label">ttl:</span>
		<span id="ttlValue" class="value">60000</span>
		<span><input type="range" min="1000" max="60000" step="100" value="60000" id="ttl" class="control"></span>
	</div>
	<div>
		<span class="label">refresh:</span>
		<span id="refreshValue" class="value">1000</span>
		<span><input type="range" min="50" max="3000" step="50" value="1000" id="refresh" class="control"></span>
	</div>
	<div>
		<span class="label">delay:</span>
		<span id="delayValue" class="value">2000</span>
		<span><input type="range" min="0" max="5000" step="100" value="2000" id="delay" class="control"></span>
	</div>
	<div>
		<span class="label">frameRate:</span>
		<span id="frameRateValue" class="value">30</span>
		<span><input type="range" min="1" max="60" step="1" value="30" id="frameRate" class="control"></span>
	</div>
	<div>
		<span class="label">pause:</span>
		<span id="pauseValue" class="value">false</span>
		<span><input type="checkbox" id="pause" class="control"></span>
	</div>
</body>