I have a situation where I'm displaying multiple charts within a mat-tab, but I'm experiencing an issue with the animation of data in the chart.
animation: {
duration: 1000,
easing: 'easeOutQuart'
}
The animation works fine outside of the mat-tab, but inside it only shows the final effect without any actual animation during the set time. I tried using onComplete() which triggers after the set time, but still no animation. I am also utilizing ngx-charts. Any suggestions on how to resolve this?
chart.ts
public chartOptions = {
responsive: true,
title: {
display: false
},
legend: {
display: false
},
scales: {
xAxes:
[{
display: true,
ticks: {
callback: function (dataLabel, index) {
if ([0, 5, 11, 17, 23].indexOf(index) !== -1) {
return dataLabel;
} else {
return null;
}
// return (index + 1) % 3 === 0 ? dataLabel : null;
},
autoSkip: false,
maxRotation: 0,
padding: 10,
fontColor: 'rgba(0, 0, 0, 0.5)'
},
gridLines: {
display: false
}
}],
yAxes: [{
ticks: {
fontColor: 'rgba(0,0,0,0.5)',
beginAtZero: true,
maxTicksLimit: 5,
padding: 10,
min: 0,
suggestedMax: 100
},
gridLines: {
drawTicks: false,
drawBorder: false,
color: 'rgba(0,0,0, 0.04)'
}
}]
},
animation: {
duration: 1000,
easing: 'easeOutQuart'
},
tooltips: {
callbacks: {
label: (item, data) => `${item.yLabel} ${data.datasets[item.datasetIndex].label}`,
title: function (tooltipItems, data) {
return `Hour: ${data.labels[tooltipItems[0].index]}`;
},
}
}
};
chart.html
<div class="chart-area">
<canvas baseChart
[chartType]="'bar'"
[datasets]="[chartConfig.chartData]"
[labels]="chartConfig.chartHours"
[options]="chartConfig.chartOptions"
[colors]="[chartConfig.chartColors]">
</canvas>
</div>