kravchenya
commented
3 weeks ago after upgrading from "ng-apexcharts": "1.9.0" to "ng-apexcharts": "1.11.0" bug is not any reproducible
Open kravchenya opened 1 month ago
kravchenya
commented
3 weeks ago after upgrading from "ng-apexcharts": "1.9.0" to "ng-apexcharts": "1.11.0" bug is not any reproducible
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: https://github.com/apexcharts/vue-apexcharts/issues/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();