Chart.js fixed Y axis with horizontal scroll

by heldersepu

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://github.com/chartjs/Chart.js/releases/download/v2.6.0/Chart.min.js"></script>
<div class="chartWrapper">
  <div class="chartAreaWrapper">
  <div class="chartAreaWrapper2">
      <canvas id="chart-Test" height="300" width="1200"></canvas>
  </div>
  </div>
  <canvas id="axis-Test" height="300" width="0"></canvas>
</div>

CSS

.chartWrapper {
  position: relative;
}

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

.chartAreaWrapper {
  width: 600px;
  overflow-x: scroll;
}

JavaScript

$(document).ready(function () {

    function generateLabels() {
        var chartLabels = [];
        for (x = 0; x < 100; x++) {
            chartLabels.push("Label" + x);
        }
        return chartLabels;
    }

    function generateData() {
        var chartData = [];
        for (x = 0; x < 100; x++) {
            chartData.push(Math.floor((Math.random() * 100) + 1));
        }
        return chartData;
    }

    function addData(numData, chart) {
        for (var i = 0; i < numData; i++) {
            chart.data.datasets[0].data.push(Math.random() * 100);
            chart.data.labels.push("Label" + i);
            var newwidth = $('.chartAreaWrapper2').width() + 60;
            $('.chartAreaWrapper2').width(newwidth);
        }
    }

    var chartData = {
        labels: generateLabels(),
        datasets: [{
            label: "Test Data Set",
            data: generateData()
        }]
    };



    $(function () {
        var rectangleSet = false;

        var canvasTest = $('#chart-Test');
        var chartTest = new Chart(canvasTest, {
            type: 'bar',
            data: chartData,
            maintainAspectRatio: false,
            responsive: true,
            options: {
                tooltips: {
                    titleFontSize: 0,
                    titleMarginBottom: 0,
                    bodyFontSize: 12
                },
                legend: {
                    display: false
                },
                scales: {
                    xAxes: [{
                        ticks: {
                            fontSize: 12,
                            display: false
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            fontSize: 12,
                            beginAtZero: true
                        }
                    }]
                },
                animation: {
                    onComplete: function () {
                  ...