A simple chart with "floating" points. What is the best way to implement?

Question

JavaScript

You need to make a simple graph like here, on the second screen of pixelbin.com .

It is necessary that the points move smoothly up and down in the same way and react to the cursor within a certain radius. What is the easiest way to implement it? Are there ready-made solutions or is it easier to tinker yourself?

Answer 1

all this can be implemented through www.chartjs.org , you just have to do a little more
laziness to generate GIF, but I did the same in my CRM
Processing through

Chart.plugins.register({
  afterDatasetsDraw: function(chartInstance, easing) {
    var ctx = chartInstance.chart.ctx;
    chartInstance.data.datasets.forEach(function (dataset, i) {
      var meta = chartInstance.getDatasetMeta(i);
      if (!meta.hidden && dataset.type == 'line') {
        // здесь код того что вы хотите реализовать
      }
    });
  }
});