I am using react to render 2 charts, a line chart and bar chart stack vertically. When I scroll to look at barChart below, after each update, chartjs, forces my scroll to (0,0). I have seen some implementation that does not move the scroll's position after each update.

Please help

          <canvas id="lineChart"  onLoad={ load() }>
            Your browser does not support canvas, please upgrade to latest browser
          </canvas>

          <canvas id="barChart"  onLoad={ load() }>
            Your browser does not support canvas, please upgrade to latest browser
          </canvas>

   //to load chart.js
    var myChart = new Chart($("#barChart")[0], {
        type: 'bar',
        data: {
            labels: props.labels,
            datasets: [{
                label: props.label,
                data: props.data,
                backgroundColor: props.labels.map(l => props.color) ,
                borderColor: props.labels.map(l => props.borderColor) ,
                borderWidth: 0.01
            }]
        },
        options: {
          scales: {
            yAxes: [{
              ticks: {beginAtZero: true}
            }]
        }
       }
    });

I am using react to render 2 charts, a line chart and bar chart stack vertically. When I scroll to look at barChart below, after each update, chartjs, forces my scroll to (0,0). I have seen some implementation that does not move the scroll's position after each update.

Please help

          <canvas id="lineChart"  onLoad={ load() }>
            Your browser does not support canvas, please upgrade to latest browser
          </canvas>

          <canvas id="barChart"  onLoad={ load() }>
            Your browser does not support canvas, please upgrade to latest browser
          </canvas>

   //to load chart.js
    var myChart = new Chart($("#barChart")[0], {
        type: 'bar',
        data: {
            labels: props.labels,
            datasets: [{
                label: props.label,
                data: props.data,
                backgroundColor: props.labels.map(l => props.color) ,
                borderColor: props.labels.map(l => props.borderColor) ,
                borderWidth: 0.01
            }]
        },
        options: {
          scales: {
            yAxes: [{
              ticks: {beginAtZero: true}
            }]
        }
       }
    });

• javascript
• chart.js

1 Answer 1

I had a similar issue when destroying a chart and recreating it. My workaround was to get the scroll position before destruction and reapply it after creation. For example in jQuery:

var pos = $(document).scrollTop();
if (chart != undefined)
chart.destroy();

chart = new Chart(ctx, chartOptions);
$(document).scrollTop(pos);