Chartjs-Chart.js: Chart not resizing in iframe

by

1👍

Change iframes to divs with modifiing your splitter.js:

$(document).ready(function () {
const splits = 2;
for(var i = 0; i < splits;i++){
    var chartContainer = $('<div id="frame' + (i + 1) + '"></div>').appendTo("#content");
    var canvas = $('<canvas class="diagram">').appendTo(chartContainer);
    if(i === 0)
        chartContainer.addClass('width50 height100');
    else
        chartContainer.addClass('width50 height100 left50');
}
});

It will add two divs to the content element instead of iframes and also put the canvases into the divs.
Than change your diagram.js to foreach over the canvases and make them work as a chart:

$('canvas.diagram').each(function(){
var ctx = $(this);
var myChart = new Chart(ctx, {
  //here comes the chart configuration...
});
});

Change your css to align the two div next to each other with

.width50 {
width: 50%;
display: inline-block;
}

So the charts are now inside block elements and because of they’re set to be responsive if you resize the window they will be resized automatically based on their parent elements’ width (so you can remove the resizing part from your script too)

Leave a comment