title: Set a fixed x axis and scrollable y axis in chartjs
body: <p>I am trying to render a fixed axis on a chartjs horizontal bar chart and so far I have been able to render a fixed x axis but want it to cover the bars behind it.  <a href="https://i.stack.imgur.com/7HBQM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7HBQM.png" alt="enter image description here" /></a></p>
  <pre><code>
  $(document).ready(function () {
      const scroll = document.getElementById('scroll');
      function generateLabels() {
          var chartLabels = [];
          for (x = 0; x &lt; 100; x++) {
              chartLabels.push(&quot;Label&quot; + x);
          }
          return chartLabels;
      }
  
      function generateData() {
          var chartData = [];
          for (x = 0; x &lt; 100; x++) {
              chartData.push(Math.floor((Math.random() * 100) + 1));
          }
          return chartData;
      }
  
  //     function addData(numData, chart) {
  //         for (var i = 0; i &lt; numData; i++) {
  //             chart.data.datasets[0].data.push(Math.random() * 100);
  //             chart.data.labels.push(&quot;Label&quot; + i);
  //             var newHeight = $('.chartAreaWrapper2').height();
  //             $('.chartAreaWrapper2').width(newHeight);
  //         }
  //     }
  
      var chartData = {
          labels: generateLabels(),
          datasets: [{
              label: &quot;Test Data Set&quot;,
              data: generateData(),
              borderRadius: 30,
          }]
      };
  
  
          var rectangleSet = false;
  
          var canvasTest = $('#chart-Test');
          var chartTest = new Chart(canvasTest, {
              type: 'bar',
              data: chartData,
              maintainAspectRatio: false,
              responsive: true,
              options: {
                  layout: {
                    padding: {
                      bottom: 20,
                      left: 0
                    }
                  },
                  backgroundColor: '#FF6700',
                  scales: {
                    x:  {
                      color: '#999999',
                      position: {
                        y: 30,
                        x: 0
                      },
                      padding:  {
                        top: 10,
                      },
                      grid: {
                      borderColor: '#999999'
          }}
                  },
                y: {                    
                     color: '#999999'
                   },
                  plugins: {
                    legend: false,                    
                  },
                  indexAxis: 'y',
                  tooltips: {
                      titleFontSize: 0,
                      titleMarginBottom: 0,
                      bodyFontSize: 12
                  },
              }
          });
  //         addData(5, chartTest);
    
  scroll.addEventListener('scroll', function(e) {
    pos = chartTest.scales.y.getValueForPixel(scroll.scrollTop + 250);
    chartTest.options.scales.x.position = {x: pos};
    console.log(pos)
    chartTest.update();
  });
  
  });
  
  
  </code></pre>
  <pre><code>.chartWrapper {
    position: relative;
  }
  
  .chartWrapper &gt; canvas {
    position: absolute;
    left: 0;
    bottom: 0;
    pointer-events: none;
  }
  
  .chartAreaWrapper {
    height: 300px;
    overflow-y: scroll;
    background-color:  #1C1C1C;
  }
  
  </code></pre>
  <pre><code>&lt;div class=&quot;chartWrapper&quot;&gt;
    &lt;div id=&quot;scroll&quot; class=&quot;chartAreaWrapper&quot;&gt;
    &lt;div class=&quot;chartAreaWrapper2&quot;&gt;
        &lt;canvas id=&quot;chart-Test&quot; height=&quot;300&quot; width=&quot;300&quot;&gt;&lt;/canvas&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I have reproduced the issue here on jsbin</p>
  <p><a href="https://jsbin.com/hajugok/2/edit?html,js,output" rel="nofollow noreferrer">https://jsbin.com/hajugok/2/edit?html,js,output</a></p>