function onRefresh(chart) {
var t = Date.now();
var data = chart.data.datasets[0].data;
var last;
t -= t % 5000;
if (data.length === 0) {
data.push({ t: t - 5000, o: 99, h: 101, l: 98, c: 100 });
}
last = data[data.length - 1];
if (t != last.t) {
var c = last.c;
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: [],
fractionalDigitsCount: 2
}]
},
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: {
position: 'nearest',
intersect: false
},
animation: {
duration: 0
}
}
};
window.onload = function() {
var ctx = document.getElementById('myChart').getContext('2d');
window.myChart = new Chart(ctx, config);
};
<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://www.chartjs.org/chartjs-chart-financial/chartjs-chart-financial.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.8.0"></script>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
</body>