javascript - Chart.js Disappear on Window Resize - Stack Overflow

admin管理员组

文章数量:1405577

I'm using Chart.js to display a line chart in a div which is within a <tr>.

<tr class="item">...</tr>
<tr class="item-details">
...
    <div class="col-sm-6 col-xs-12 chart-pane">
        <div class="chart-container">
            ...
            <div><canvas id="future-chart"></canvas></div>
        </div>
    </div>
...
</tr>

When the page is loaded, the item-details <tr> is hidden, and clicking on the item <tr> above it will make it show as well as call a function to draw the chart in the canvas. This function is shown below:

$(document).on('click', '.item', function(){
    var itemDetails = $(this).closest('tr').next('tr');
    ...
    var canvas = itemDetails.find('#future-chart').get(0);

    if (canvas) {
        ...
        // just setting data here
        var data = { 
            ...
        };
        var options = {
            responsive: true,
            maintainAspectRatio: true
        };  
        var futureChart = new Chart(context).Line(data,options);
    }   
}); 

The problem I'm having is that if I click the div to show when the screen is larger than 767px (), then click again to hide, resize the screen to less than 767px, and open the tr again, the chart is gone.

This is the only case I can find which makes the chart disappear. If I do the opposite of the above, the chart stays there. If I leave the <tr> open and resize the window, the chart stays just fine.

I have Responsive set to True and the chart resizes correctly when the <tr> is open and I resize the window.

I was thinking I needed to re-draw the canvas when the window is resized, however the entire chart is supposed to be re-drawn whenever the <tr> is opened, so I'm not sure exactly what is causing this.

I'm using Chart.js to display a line chart in a div which is within a <tr>.

<tr class="item">...</tr>
<tr class="item-details">
...
    <div class="col-sm-6 col-xs-12 chart-pane">
        <div class="chart-container">
            ...
            <div><canvas id="future-chart"></canvas></div>
        </div>
    </div>
...
</tr>

When the page is loaded, the item-details <tr> is hidden, and clicking on the item <tr> above it will make it show as well as call a function to draw the chart in the canvas. This function is shown below:

$(document).on('click', '.item', function(){
    var itemDetails = $(this).closest('tr').next('tr');
    ...
    var canvas = itemDetails.find('#future-chart').get(0);

    if (canvas) {
        ...
        // just setting data here
        var data = { 
            ...
        };
        var options = {
            responsive: true,
            maintainAspectRatio: true
        };  
        var futureChart = new Chart(context).Line(data,options);
    }   
}); 

The problem I'm having is that if I click the div to show when the screen is larger than 767px (), then click again to hide, resize the screen to less than 767px, and open the tr again, the chart is gone.

This is the only case I can find which makes the chart disappear. If I do the opposite of the above, the chart stays there. If I leave the <tr> open and resize the window, the chart stays just fine.

I have Responsive set to True and the chart resizes correctly when the <tr> is open and I resize the window.

I was thinking I needed to re-draw the canvas when the window is resized, however the entire chart is supposed to be re-drawn whenever the <tr> is opened, so I'm not sure exactly what is causing this.

• javascript
• html
• css

Share Follow asked Jan 30, 2016 at 20:20 Ryan McClureRyan McClure 1,23333 gold badges2020 silver badges3535 bronze badges 5

• What happens when you Inspect Element? Is the chart still in your DOM? I'm wondering if the issue is that it's giving it a size of 0 because it's sizing the chart according to the parent div and when tr is hidden, it's size is 0. Since opening the tr element doesn't trigger a window.resize event, it doesn't redraw the chart. Does resizing the window after you open the tr give you a correctly sized chart once again? – adilapapaya Commented Jan 30, 2016 at 20:32
• The chart is still in the DOM, and it has a width depending on the size of the window, however the height is set to0. Resizing the window after opening the tr always gives a correctly sized chart except for the one case. – Ryan McClure Commented Jan 30, 2016 at 20:39
• I tried setting a min-height on the canvas, so now the height is always > 0, but the canvas area is still empty. – Ryan McClure Commented Jan 30, 2016 at 21:06
• an external link to the online version is really the only case you may find your answer – Peyman Mohamadpour Commented Jan 30, 2016 at 21:21
• 1 Realize this is an old question, however: I ran into trouble with window resizing and charts (Chart.js 2.7.2) disappearing, which I resolved by calling chart.update() after a resize event. Have you tried this? – Josh Coulter Commented Oct 5, 2018 at 23:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I had a problem, on resizing the window, the graph disappears. I solved the problem by creating the graph just once with the new mand

this.myChart = new Chart(this.ctx, {
      type: 'line', .....
}

After that, I only do update() on the created chart. indeed, creating a chart each time is not kept in memory. Example to update the datasets

this.myChart.data.datasets = datasetsTmp;
this.myChart.update();

I hope it's help.

You need to fetch the data between two dates, every time user resize the graph

See the coinmarketcap.

本文标签： javascriptChartjs Disappear on Window ResizeStack Overflow