line chart with ChartJS

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="600" 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: 600px;
        }

JavaScript

var lbl = [];
        var dt = [];
        for (var i = 1; i <= 100; i++) {
            lbl.push("this_is_my_lable_name_" + i);
        }
        for (var i = 1; i <= 100; i++) {
            dt.push(Math.floor((Math.random() * 100) + 1));
        }
        
var ctx = document.getElementById("myChart").getContext("2d");

        var chart = {
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
  	    xAxes:[{
   	 ticks: {
          autoSkip: false,
          maxRotation: 90,
          minRotation: 90
        },
     barThickness : 30
    	
    }]
  },
          animation: {
                    
                    onComplete: function(animation) {
                        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, copyHeight, 0, 0, copyWidth, copyHeight);
                    }
                }
      },
        type: 'bar',
        data: {
                 labels: lbl,
        datasets: [{
            label: '# of Votes',
            data: dt}]
        }
        };



  var newwidth = (lbl.length * 30) + 100//50 padding
  $('.chartAreaWrapper2').width(newwidth);
   var myLiveChart = new Chart(ctx, chart);