...
All geek questions in one place

Chart.js disappears when the window changes

I use Chart.jsto display a line chart in a div that is inside <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, item-details <tr>hidden, and clicking on the item <tr>above, it will display it and also call the function to draw a diagram on 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 is that if I click on the div to show when the screen is larger than 767px (), then click again to hide, resize the screen to less than 767 pixels and open tr again, the diagram did not go through.

This is the only case I can find, which is why the chart disappears. If I do the opposite of the above, the chart will remain there. If I leave <tr>open and resize the window, the graph will remain in order.

Responsive True, <tr>, .

, , , <tr>, , ,

+4

Source: https://habr.com/ru/post/1626687/

More articles:


All Articles