function onRefresh(chart) {
var data = chart.data.datasets[0].data;
var last = data[data.length - 1];
var t = Date.now();
t -= t % 5000;
if (!last || t != last.t) {
var c = last ? last.c : 100;
last = { t: t, o: c, h: c, l: c, c: c };
data.push(last);
}
last.c += Math.random() - 0.5;
last.h = Math.max(last.h, last.c);
last.l = Math.min(last.l, last.c);
}
var config = {
type: 'candlestick',
data: {
datasets: [{
data: []
}]
},
options: {
title: {
display: true,
text: 'Financial chart sample'
},
legend: {
display: false,
},
scales: {
xAxes: [{
type: 'realtime',
realtime: {
duration: 120000,
refresh: 500,
delay: 0,
onRefresh: onRefresh
}
}]
},
tooltips: {
enabled: false
}
}
};
window.onload = function() {
var ctx = document.getElementById('myChart').getContext('2d');
window.myChart = new Chart(ctx, config);
};
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdn.rawgit.com/chartjs/chartjs-chart-financial/master/docs/Chart.Financial.js"></script>
<script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.7.0/chartjs-plugin-streaming.min.js"></script>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
</body>