Chartjs-Graph (chartjs.org) does not stretch properly when sidebar(menu) is collapsed

by

1👍

✅

While responsive: true does trigger a chart resize (to fit its wrapper), this handler is attached to the window resize event. You just need to do whatever this code does in the CSS transition end. Something like

$("#wrapper").on('transitionend webkitTransitionEnd oTransitionEnd', function () {
      myLineChart.resize(myLineChart.render, true);
});

Fiddle – https://jsfiddle.net/k2kjz8s3/

Note : The transition end event triggers for EACH transitioned property. So if you have 2 animated properties (say padding / width), the above is going to trigger twice.

This is not a problem for the resize() (besides it running twice), but if you are adding any other functionality that is not idempotent, it will cause problems. In this case you should be listening for any one of the transitioned properties, like so

function redrawGraph(evt) {
     if (evt.originalEvent.propertyName == 'width') {
     ...

Leave a comment