I am utilizing the Chart.js library to present a line chart in a div that is enclosed 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>
Upon the page load, the content of the item-details <tr> remains hidden. Clicking on the preceding item <tr> will reveal it and trigger a function to draw the chart within the canvas. The function is detailed below:
$(document).on('click', '.item', function(){
var itemDetails = $(this).closest('tr').next('tr');
...
var canvas = itemDetails.find('#future-chart').get(0);
if (canvas) {
...
// setting data here
var data = {
...
};
var options = {
responsive: true,
maintainAspectRatio: true
};
var futureChart = new Chart(context).Line(data,options);
}
});
The issue arises when I toggle the visibility of the content in <tr> from visible to hidden at a screen width larger than 767px, then resize the window to less than 767px and open the <tr> again - the chart disappears.
This particular scenario causes the chart to vanish. However, if I reverse the sequence described above, the chart remains unaffected. Similarly, leaving the <tr> open and resizing the window does not impact the display of the chart.
Despite having the Responsive option set to True where the chart should resize appropriately when the <tr> is displayed, I am considering incorporating a re-draw function for the canvas upon window resize. Yet, since the entire chart should be redrawn whenever the <tr> is opened, I am uncertain of the root cause behind this issue.