react-chartjs-2 horizontall scrollable with fixed y-axis

main.jsx

import React, { Component } from 'react';
import { Line } from 'react-chartjs-2';
export default class ChartComponent extends Component {
  getOptions = () => {
    var itself = this; 
    return {
      maintainAspectRatio: false,
      responsive: true,
      elements: {
        line: {
          fill: false
        }
      },
      scales: {
        'x-axis-1' : {
          display: true,
          grid: {
            display: false,
          },
          ticks:{
            display: true,
          }
        },
        'y-axis-1' : {
          display: true,
          grid: {
            display: true,
          },
          ticks:{
            display: true,
          }
        }
      },
      plugins: {
        tooltip: {
          mode: 'point', 
          callbacks: {
            afterLabel: (context) => {
              // some customization here
            }
          }
        },
        legend: {
          display: this.props.showLegend ? this.props.showLegend : false,
          position: 'top',
          labels: {
            usePointStyle: true,
          }
        },
      },
      "animation": {
        "duration": 1,
        "onComplete": function() {
          var scale = window.devicePixelRatio;                       
          var sourceCanvas = this.ctx.canvas;
          var copyWidth = this.scales['y-axis-1'].width - 7;
          var copyHeight = this.scales['x-axis-1'].top + 10;
          if (itself.refs.ticksWrp && (copyWidth > 0) && (copyHeight > 0)) {
            var targetCtx = itself.refs.ticksWrp.getContext("2d");
            if (targetCtx && sourceCanvas) {
              targetCtx.scale(scale, scale);
              targetCtx.canvas.width = copyWidth * scale;
              targetCtx.canvas.height = copyHeight * scale;
              targetCtx.canvas.style.width = `${copyWidth}px`;
              targetCtx.canvas.style.height = `${copyHeight}px`;
              targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth * scale, copyHeight * scale, 0, 0, copyWidth * scale, copyHeight * scale);
              if (itself.refs.chartWrp)
                itself.refs.chartWrp.scrollLeft = itself.refs.chartWrp.scrollWidth; // scroll to the right
            }
          }
        }
      }
    };
  }


  render() {
    let { data } = this.props;
    var options = this.getOptions();
    var width = data.datasets[0].data.length < 7 ? '100%' : (data.datasets[0].data.length*50).toString() + 'px';
    var height = mode === 'monthly' ? '200px' : '300px';
    
    return (<div className="chart-wrp">
      <div className="chart-overflow-wrp" ref="chartWrp">
        <div className="main-chart-wrp" style={{width: width}}>
          <Line data={data} options={options} height={height}/>
        </div>
      </div>
      <canvas ref="ticksWrp" className="custom-y-ticks" height={height} width="0"></canvas>
    </div>);
  }
}

style.css

.chart-wrp {
	position: relative;
	.chart-overflow-wrp {
		width: 100%; 
		overflow-x: auto; 
		overflow-y: hidden; 
	}
	.custom-y-ticks {
		position: absolute;
		left: 0;
		top: 0;
		pointer-events: none; 
		background-color: #fff;
	}
}