Leaving the page with a highstock chart in it throws multiple console errors despite chart doing its job

[Klevis Xhyra]

The following errors appear when leaving a page that's got high stocks:

Error: <g> attribute transform: Trailing garbage, "translate(576, NaN)"
Error: <g> attribute transform: Expected number, "translate(NaN,0)"

The problem, is narrowed down, to be caused by dataLabels, specifically setting the overflow: "justify"

dataLabels: {
    enabled: true,
    useHTML: true,
    crop: false,
    overflow: 'justify', 
    formatter: function () { 
    // some HTML here
    },
    align: 'center',
    verticalAlign: 'bottom',
     y: -10, // Offset from the point vertically
     x: 0, // Center horizontally relative to the point
   }

Removing overflow: "justify", fixes the issue, but the desired UI is not achieved.

In the API docs it says that overflow is by default justify, but it is not working without specifically setting it.

The Highchart component is being rendered in this way, and there is no issue with that.

 <HighchartsReact
       highcharts={someCondition ? HighchartsStock : Highcharts}
       options={options}
       ref={chartComponentRef}
       constructorType={someCondition ? 'stockChart' : 'chart'}
 />

Just in case the problem was because of conditional props, tried rendering the component with only Stock:

 <HighchartsReact
       highcharts={HighchartsStock}
       options={options}
       ref={chartComponentRef}
       constructorType={'stockChart'}
 />

Here is a screenshot of the error:

Highchartversion being used: 10.2.0
Upgrading to 10.3.1 did not solve the issue

Lifecycle hooks from react-use are also being used to fire the chart.destroy() function in an attempt to clear bits from memory.

// on unmount run chart.destroy()
  useLifecycles(
    () => {
      console.log('MOUNTED');
    },
    () => {
      const chart = chartComponentRef.current?.chart;
      if (chart) {
        chart.destroy();
      }
      console.log('UNMOUNTED');
    },
  );

It looks like there is an issue, so any follow-up on this would be appreciated.

[Paweł Potaczek]

Hi @kleviss,

Thank you for contacting us!

Could you reproduce the problem in some online code editor? The provided information is not enough for me to reproduce the issue.

You can use this simple example: https://stackblitz.com/edit/react-kftezg as a base to start.

Best regards!

[Klevis Xhyra]

Hey @ppotaczek - I understand that from the description above, you cannot reproduce the issue, as I am also unable to reproduce it in a simple environment https://stackblitz.com/edit/react-jdxyqn?file=index.js. In my use case, it involves a very complex implementation, and it would be difficult to demonstrate without sharing the entire component (an 800-line file).

During the debugging process, I observed that when overriding the dataLabels prop overflow: 'justify', the error consistently appears. When removing this override, the error disappears but it prevents the label from overflowing as needed. This suggests that the error is directly tied to the overflow: 'justify' property, which likely needs to dynamically adjust the label to fit within the chart area. I assume that setting this prop, would make it possible for the label to be translated so it fits the chart area all the time, thus the error Expected number, "translate(NaN,180)"... Also it is super weird, that this property should be there by default, but it is only working when I am manually setting it (overflow: Highcharts.DataLabelsOverflowValue Since 3.0.6 - Defaults to justify.)

As I have also mentioned, the graph is showing fine, but I wanted to clear the console from errors, and as I mentioned when I removed datalabels, the error disappeared from the console. It may also be because of the options we are setting in the useEffect, based on different dependencies that may change or any race condition going on when setting overflow: 'justify', or when the graph is being unmounted and the value for the label to be translated is not there, but that case is counted for that case in the checks we are doing inside the formatter, as being showed under https://stackblitz.com/edit/react-jdxyqn?file=LineChart.js line 32.

Initally thought that would fix it but it seems that the issue happens before hitting the formatter, that's why I thought this as an issue of the library. From reading in the forums seems that such weird issues are disappeared with udaptes like in here https://www.highcharts.com/forum/viewtopic.php?f=12&t=50347 but that was not my case. It is worth also mentioning though that the framework used is Next.js.

Here is an expanded errors again, if they would give more info about the error occurring:

|
With that all being said, I understand that due to the lack of reproduction, this issue may be dismissed and closed. However, if possible, based don't the context I have provided above, I would greatly appreciate, any resources or insights you might have on similar issues that have appeared before or what might be causing this problem. Your guidance would help us prevent similar issues and improve our overall workflow. Thanks!

[Paweł Potaczek]

Hi @kleviss, Thanks for providing more information!

However, without reproduction, I have limited possibilities to investigate the problem.
The issue seems to be a bug in Highcharts, but without checking the order of events, it's hard to confirm.

The case with the default overflow: 'justify' in the API is also probably a mistake, so you can report it on the main Highcharts repository: https://github.com/highcharts/highcharts/issues

You can try the below things:

• Check if the issue still occurs in the newest Highcharts version (11.4.3)
• Find out why there is NaN in "translate(NaN,180)" by using browser debugger and add a potential fix by extending Highcharts: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
• Try to isolate the problem (even with the entire component) in some minimal React project and provide a zip archive here

Best regards!