Quantcast
Channel: Recent Questions - Stack Overflow
Viewing all articles
Browse latest Browse all 16420

Chart doesn't resize when moved to a differently sized container in Chart.js 4.4.2

$
0
0

I have two charts next to each other, the left one is big and the right one is small, each in their own container. When the small chart is clicked I want the charts to switch places so that the small chart is moved to the big container on the left and the big chart is moved to the small container on the right and the charts should adjust to the sizes of their new containers. This worked in Chart.js v2.9.4 but after I upgraded to v4.4.2 the charts remain in their original sizes after moving containers.

Here is some simple code to demonstrate the problem:HTML

<div id='chart-container'><div id='big-chart-container'><canvas id='chart1'></canvas></div><div id='small-chart-container'><canvas id='chart2'></canvas></div></div><script src="https://cdn.jsdelivr.net/npm/chart.js"></script><!--Swapping charts works in chart.js 2--><!--<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>-->

CSS

#chart-container{    display: flex;    width: 60vw;  }  #big-chart-container{    width: 60%;  }  #small-chart-container{    width: 30%;  }

JavaScript

var canvas1 = document.getElementById('chart1')var canvas2 = document.getElementById('chart2')let bigChartContainer = document.getElementById('big-chart-container');let smallChartContainer =document.getElementById('small-chart-container');let data1 = [5,7,6,2,6,8,4,5]let data2 = [4,8,15,16,23,42]let labels1 = [...Array(data1.length).keys()]let labels2 = [...Array(data2.length).keys()]let bigChartID = 'chart1';function chartClicked(chartID){    if(bigChartID != chartID){ //if small chart is clicked then swap charts      let smallChart = document.getElementById(chartID)      let bigChart = document.getElementById(bigChartID)      bigChartContainer.appendChild(smallChart)      smallChartContainer.appendChild(bigChart)      bigChartID = chartID    }}const bigChart = new Chart(canvas1.getContext('2d'), {  type: 'line',  data: {    labels: labels1,    datasets: [{      label: "Chart 1",      data: data1    }]  },  options: {    onClick: function(){      chartClicked('chart1')    }  }})const smallChart = new Chart(canvas2.getContext('2d'), {  type: 'line',  data: {    labels: labels2,    datasets: [{      label: "Chart 2",      data: data2,      borderColor: 'rgb(255, 99, 132)',    }]  },  options: {    onClick: function(){      chartClicked('chart2')    }  }})

If I downgrade to chart.js 2 then switching the charts works perfectly.


Viewing all articles
Browse latest Browse all 16420

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>