chartjs-plugin-zoom + chartjs-plugin-style

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.6.5/chartjs-plugin-zoom.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-style.min.js"></script>
<div>
  <canvas id="canvas"></canvas>
</div>

JavaScript

var randomScalingFactor = function() {
  return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
};
var randomColor = function(opacity) {
  return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
};

var scatterChartData = {
  datasets: [{
    label: "My First dataset",
    data: [{
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }]
  }, {
    label: "My Second dataset",
    data: [{
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }]
  }]
};

scatterChartData.datasets.forEach(function(dataset) {
  dataset.borderColor = randomColor(0.4);
  dataset.backgroundColor = randomColor(0.1);
  dataset.pointBorderColor = randomColor(0.7);
  dataset.pointBackgroundColor = randomColor(0.5);
  dataset.pointBorderWidth = 1;
});

  var ctx = document.getElementById("canvas").getContext("2d");
window.myScatter = new Chart(ctx, {
  type: 'line',
  data: scatterChartData,
  options: {
    title: {
      display: true,
      text: 'Chart.js Scatter Chart'
   ...