Multiple Y-Axis: "opposite: true" causes "Error: <g> attribute transform: Expected number, "translate(NaN, 0)"."

[kravchenya]

I use Angular (17.3.1), Angular Material (17.3.1) and ApexCharts ("apexcharts": "^3.48.0", "ng-apexcharts": "^1.9.0").

When I have multiple Y-Axis and for one of the Y-axis I use setting "opposite: true", if I change to a new tab in my app, then I get an error in console: "apexcharts.common.js:6 Error: attribute transform: Expected number, "translate(NaN, 0)"."

After trying many things out, on the level of intuition, I understood, that issue may come from some half way initialised objects still residing in memory, so I tried explicitly to remove them by implementing OnDestroy. It sort of solved the issue (error has not been thrown any more), however as my application supports localisation, this solution created a new problem once I switch locale (I got a new exception in the console: "TypeError: Cannot read properties of null (reading 'resetSeries')"). Therefore for time being I chose the lesser devil and will live with initial issue.

Surprisingly the issue is the same as this one, even though it is for Vue and sadly it is already 5 years old: apexcharts/vue-apexcharts#108

My config:

const chartOptions = {
series: [
{
name: indexTitle,
data: this.ihistoricalInflation.priceIndex,
},
{
name: yoyTitle,
data: this.ihistoricalInflation.inflationYoY,
},
],
chart: {
foreColor: this.fontColor,
height: 530,
},
dataLabels: {
enabled: true,
enabledOnSeries: [1],
style: {
colors: [this.lineColor2],
fontWeight: '100',
},
background: {
foreColor: this.fontColor,
borderColor: this.lineColor2,
opacity: 1,
},
},
stroke: {
curve: 'smooth',
width: [4, 4, 2],
},
grid: {
show: false,
},
xaxis: {
type: 'datetime',
categories: this.ihistoricalInflation.date,
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
tickAmount: 10,
labels: {
formatter: function (value: number) {
return moment(new Date(value)).format('YYYY');
},
},
},
yaxis: [
{
min: 0,
max: 200,
labels: {
formatter: function (value: number) {
return value.toFixed(2);
},
},
axisBorder: {
show: true,
color: this.lineColor1,
},
seriesName: indexTitle,
title: {
text: cpiIndexAxis,
style: {
color: this.lineColor1,
fontWeight: 400,
},
},
tickAmount: 4,
},
{
min: 0,
max: 8,
labels: {
formatter: function (value: number) {
return value.toFixed(2);
},
},
axisBorder: {
show: true,
color: this.lineColor2,
},
seriesName: yoyTitle,
opposite: true,
title: {
text: yoyCpiIndexAxis,
style: {
color: this.lineColor2,
fontWeight: 400,
},
},
tickAmount: 5,
},
],
tooltip: {
x: {
format: 'yyyy',
theme: this.tooltipTheme,
},
y: {
formatter: (val: number) => {
return (
val.toLocaleString(this.translate.currentLang, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
}) + '%'
);
},
},
},
};

this.apexChart = new ApexCharts(document.querySelector('#inflationChart'), chartOptions);
this.apexChart.render();

[kravchenya]

after upgrading from "ng-apexcharts": "1.9.0" to "ng-apexcharts": "1.11.0" bug is not any reproducible