Axis options can not be cleared with undefined

[bre1470]

If I set tickPositions to null, it magically works, but TS doesn't like it, null is not allowed.
Setting single tickPositions to undefined is working with Highcharts 9.3.1.

See: highcharts/highcharts-react#110

Demo: https://jsfiddle.net/43w5ch2L/

Workaround: https://jsfiddle.net/bre1470/tr6shfy4/
Setting tickPositions options to [] is working with rendering of Highcharts 9.3.1, though the previous options are still accessible via Axis.options.

[bre1470]

The same problem exists with max and min options.

[TorsteinHonsi]

but TS doesn't like it, null is not allowed

Should we allow null in the type definitions rather than change the behaviour?

[bre1470]

I agree in the sense, that we should continue to support null for backward compatibility, but officially we should only advertise undefined in documentation and declarations.

Otherwise it would get inconsistent with the behaviour in all other parts. It is also easier to handle undefined than null. For example you do not end up with functions that have optional parameter with a type of Array<number>|null|undefined, where the last two have the exact same result.

[bre1470]

Probably a related issue: #10525

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!

[jamesonhill]

Hi,

Can this issue be re-opened? It's still a problem on 9.2.2

[bre1470]

Hi @jamesonhill,
Thank you for the feedback. It is working for some options.
Workaround in this particular case is to set tickPositions to an empty array.
Though the tickPositions option is still set on the axis, the renderer does not add the ticks anymore.

Modified demo: https://jsfiddle.net/bre1470/tr6shfy4/

[jamesonhill]

@bre1470 Setting it to empty array causes no tick marks to display. In my case, I want to let Highcharts decide how the ticks are plotted. Currently it works if the initial value is undefined, but if you change it from non-undefined -> undefined the ticks don't update. Setting it to null and casting the variable to any is needed to satisfy TS, which isn't great but works.

[bre1470]

@jamesonhill Thank you for the details about your use case.

@TorsteinHonsi The use case reads like we have to support null as the "automatic" value instead of a tick array. What do you think?

[TorsteinHonsi]

@bre1470 Actually I think this is a bug, and in more than one sense.

1. Chart.update doesn't work, but yAxis.update works: https://jsfiddle.net/49wefqok/ . My guess (I don't have time to follow up right now), is that Chart.update fails to relay the update to the yAxis object because it erroneously thinks that nothing is changed (because of undefined?).
2. However, even when calling yAxis.update directly, the chart-level chart.options.yAxis[0] are not changed. It may be that we should mirror chart.options.yAxis[0] with the corresponding chart.yAxis[0].options. Though I am now sure about that one. At least, resolving the first problem will resolve the use case even though chart.options.yAxis is not in sync.

[TorsteinHonsi]

Further investigation leads me to the cleanRecursive function, where equal properties of two objects are removed. So when one setting in the newer object is explicitly set to undefined, and the reference object is also undefined (because it is left out), that setting is removed.

highcharts/ts/Core/Utilities.ts

Lines 297 to 300 in d29fd2a

	} else if (
	isObject(newer[key]) ||
	newer[key] !== older[key]
	) {

Should be replaced with this:

        // Arrays, primitives and DOM nodes are copied directly
        } else if (
            isObject(newer[key]) ||
            newer[key] !== older[key] ||
            // If the newer key is explicitly undefined, keep it (#10525)
            (key in newer && !(key in older))
        ) {

@KacperMadej I'll mark this good for beginners, then it's up for grabs. Write a test, implement a fix and create a PR.

[TorsteinHonsi]

For the records: It is also a problem that chart.options.yAxis is not kept in sync with chart.yAxis[0].options. But I think that's a more complex issue, and if we wanted to fix it it would require a major refactoring.