Chartist-js: How to prevent chart re-draw when scrolling down on a mobile screen?

[greenTea2Codes]

Hi,

When I view my chart on mobile phone, it redraws every time when I scroll the page.

I tried:
var width = $(window).width(); // set width
// regenerate the chart if the width of the screen is different
$(window).resize(function () {
if ($(window).width() != width) {
// width has changed
chart.update();
width = $(window).width();// assign new screen width
}
});

But it doesn't solve the problem. Does anyone have the same issue? How do you prevent chart redrawing when user scroll down a page on a mobile phone?

Thanks!

[gionkunz]

Can you tell why a resize event is triggered in your project when the user scrolls? This is not normal behavior.

[greenTea2Codes]

I checked my project and found no resize event elsewhere. However, when I comment out the codes for animating chart "chart.on('draw', function(data){...)", the chart won't re draw - or, it redraws so fast I cannot notice...

below are the animation codes:

var seq = 0,
delays = 15,
durations = 50;
chart.on('created', function () {
seq = 0;
});
chart.on('draw', function(data) {
seq++;
if(data.type === 'line' || data.type === 'area') {
// If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations.
data.element.animate({
opacity: {
// The delay when we like to start the animation
begin: seq * delays,
// Duration of the animation
dur: durations,
// The value where the animation should start
from: 0,
// The value where it should end
to: 1
}
});
} else if(data.type === 'label' && data.axis === 'x') {
data.element.animate({
y: {
begin: seq * delays,
dur: durations,
from: data.y + 100,
to: data.y,
// We can specify an easing function from Chartist.Svg.Easing
easing: 'easeOutQuart'
}
});
} else if(data.type === 'label' && data.axis === 'y') {
data.element.animate({
x: {
begin: seq * delays,
dur: durations,
from: data.x - 100,
to: data.x,
easing: 'easeOutQuart'
}
});
} else if(data.type === 'point') {
data.element.animate({
x1: {
begin: seq * delays,
dur: durations,
from: data.x - 10,
to: data.x,
easing: 'easeOutQuart'
},
x2: {
begin: seq * delays,
dur: durations,
from: data.x - 10,
to: data.x,
easing: 'easeOutQuart'
},
opacity: {
begin: seq * delays,
dur: durations,
from: 0,
to: 1,
easing: 'easeOutQuart'
}
});
}

It seems when I scroll the page, chart.on('draw') is triggered.

Can you tell me where I can investigate next?

[greenTea2Codes]

I investigated the window resize event in my phone. WIndow.resize does get triggered when the address bar appears and disappears during scrolling, because the inner height changes. Does it happen to others?

[greenTea2Codes]

I think I found the solution!

To avoid a chart being animated every time when window.resize is triggered, one can call detach() when the chart is created. Then calls update() when $(window).width() changes.

chart.on('created', function(){
chart.detach(); // it will detach resize and media query listeners
});

//then update the chart only when window.width() changes
var width = $(window).width();
$(window).resize(function(){
if($window).width() != width){
width = $(window).width() // update width
chart.update();
}
});

[belgoros]

There was a typo in the above syntax ($window instead of $(window) in the if condition), the correct version would be as follows:

// Prevent chart re-draw when scrolling down on a mobile screen,
  // see https://github.com/gionkunz/chartist-js/issues/410
  chart.on('created', function(){
    chart.detach(); // it will detach resize and media query listeners
  });

  //then update the chart only when window.width() changes
  var width = $(window).width();
  $(window).resize(function() {
    if($(window).width() != width) {
      width = $(window).width(); // update the width width
      chart.update();
    }
  });

[m6265m]

I'm using react-chartist. Can anyone tell me how can I fix this and use the update, detach and creat functions? Also, my charts redraw on any event, even onclicks. Please help me out.