Chart.js Bar chart resizes again when revisiting the tab - chart.js

Question

I'm using react-chartjs-2 wrappers Pie and Bar within Bootstrap Tab components like below.
<TabContent activeTab={activeTab}>
<TabPane tabId='1'>
<Row>
<Col>
<div className='chart-container'>
<Pie
data={pieData}
options={{...}}
/>
</div>
</Col>
</Row>
</TabPane>
<TabPane tabId='2'>
<Row>
<Col>
<div className='chart-container'>
<Bar
data={barData}
options={{...}}
/>
</div>
</Col>
</Row>
</TabPane>
</TabContent>
A part of the options object provided to the Bar instance is this.
responsive: true,
onResize: function(newChart, newSize) {
if (newSize.width < 768) {
newChart.options.scales.xAxes[0].ticks.display = false;
} else {
newChart.options.scales.xAxes[0].ticks.display = true;
}
},
legend: {
display: true,
position: 'bottom',
labels: {
generateLabels: function(chart) {
if (chart.width < 768) {
chart.options.scales.xAxes[0].ticks.display = false;
}
}
}
}, ...
When the page is loaded initially the Bar instance takes up the whole container. However when I switch to the tab 1 with the Pie instance then to the tab 2 with the Pie instance the later resizes about half the size of the container. By the size the graph reduces to it might look like the Bar instance tried to display the X axis tick labels.
The div.chart-container css rules are
.chart-container {
margin: 20px auto;
}
The complete code is at https://github.com/ElAnonimo/job-fullstack/blob/master/client/src/components/Stats.js.

Answer 1

Solved it like this. In the Bar chart options:
scales: {
xAxes: [{
display: true,
ticks: {
display: false,
callback: function(value, index, values) {
return `${value.date}, ${value.time}`;
}
}
}]
}
Though I would've thought display: false would turn off the ticks at the very creation (initialization) of the Bar chart still at the full screen size the ticks are there when the page first loads.
Comments or explanations are welcome.