chartjs-plugin-streaming tooltip

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/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.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-streaming.min.js"></script>
<canvas id="chart"></canvas>

JavaScript

function onRefresh(chart) {
  chart.data.datasets.forEach(function(dataset) {
    dataset.data.push({
      x: Date.now(),
      y: Math.random()
    });
  });
  chart.streaming.lastMouseEvent = new MouseEvent("mousemove", {
    clientX: chart.width,
  });
}

var ctx = document.getElementById('chart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'line',
  data: { datasets: [{ data: [] }, { data: [] }] },
  options: {
    scales: { xAxes: [{ type: 'realtime' }] },
    plugins: { streaming: { onRefresh: onRefresh } },
    tooltips: { mode: 'index', intersect: false }
  }
});