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.
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 whentr
is hidden, it's size is 0. Since opening thetr
element doesn't trigger awindow.resize
event, it doesn't redraw the chart. Does resizing the window after you open thetr
give you a correctly sized chart once again?0
. Resizing the window after opening thetr
always gives a correctly sized chart except for the one case.> 0
, but the canvas area is still empty.chart.update()
after a resize event. Have you tried this?