line chart with ChartJS

by Christian Bonato

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>
<div class="chartWrapper">
  <div class="chartAreaWrapper">
    <div class="chartAreaWrapper2">
      <canvas id="myChart"></canvas>
    </div>
  </div>

  <canvas id="myChartAxis" height="300" width="0"></canvas>
</div>

CSS

.chartWrapper {
          position: relative;
        }

        .chartWrapper>canvas {
          position: absolute;
          left: 0;
          top: 0;
          pointer-events: none;
        }

        .chartAreaWrapper {
          overflow-x: scroll;
          position: relative;
          width: 100%;
        }

        .chartAreaWrapper2 {
          position: relative;
          height: 300px;
        }

JavaScript

//https://github.com/chartjs/Chart.js/issues/2958#issuecomment-261949718

var ctx = document.getElementById("myChart").getContext("2d");

var chart = {
  options: {
    responsive: true,
    maintainAspectRatio: false,
    animation: {

      onComplete: function(animation) {
        var pixelRatio = myLiveChart.chart.currentDevicePixelRatio;
        var sourceCanvas = myLiveChart.chart.canvas;
        var copyWidth = myLiveChart.scales['y-axis-0'].width - 10;
        var copyHeight = myLiveChart.scales['y-axis-0'].height + myLiveChart.scales['y-axis-0'].top + 10;
        var targetCtx = document.getElementById("myChartAxis").getContext("2d");
        targetCtx.canvas.width = copyWidth;
        targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth * pixelRatio, copyHeight * pixelRatio, 0, 0, copyWidth, copyHeight);
      }
    }
  },
  type: 'bar',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: "My First dataset",
      fillColor: "rgba(220,220,220,0.2)",
      strokeColor: "rgba(220,220,220,1)",
      pointColor: "rgba(220,220,220,1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(220,220,220,1)",
      data: [65, 59, 80, 81, 56, 55, 40]
    }]
  }
};

var myLiveChart = new Chart(ctx, chart);
var timesRun = 0
var interval = setInterval(function() {
timesRun += 1;
    if(timesRun === 10){
        clearInterval(interval);
    }
  myLiveChart.data.datasets[0].data.push(Math.random() * 100);
  myLiveChart.data.labels.push("Test");
  var newwidth = $('.chartAreaWrapper2').width() + 60;
  $('.chartAreaWrapper2').width(newwidth);
  $('.chartAreaWrapper').animate({
    scrollLeft: newwidth
  });

}, 100);