Issue with ticks displaying on setting setVisible false for default x axis after updating lightningchart js

Question

I have updated lightningchart js to 4.0.0. Migration guide suggested removing dispose and adding setVisible(false). So I followed the same and I noticed on setting setVisible(false) for default x axis created vertical ticks below the chart. I have added screenshot below highlightning the issue and also the code that I am using.

So my question is how do I remove these lines?

Also, I have noticed that the code being used for

 .setTickStrategy(
        // Use Numeric TickStrategy as base.
        AxisTickStrategies.Numeric,
        // Use mutator to modify the TickStrategy.
        (tickStrategy) =>
            tickStrategy
                // Modify Major Tick Style by using a mutator.
                .setMajorTickStyle((tickStyle) => tickStyle.setGridStrokeStyle(emptyLine))
                // Modify Minor Tick Style by using a mutator.
                .setMinorTickStyle((tickStyle) => tickStyle.setGridStrokeStyle(emptyLine)),
    )

shows no error in example but when I add the same code in project it gives error. I have added screenshot for that as well.

Thanks in advance for your help related to this issue

Answer 1

To permanently remove an axis you can still continue to use .dipose(). This operations is just now oneway operation and can't be restored. Instead a new axis would have to be created.

The axis continuing to allocate space when hidden seems to be a bug and I have created an issue on our internal issue tracker to hopefully fix that in the near future.

The other issue can be resolved by defining the callback function type a bit more. Add tickStyle: VisibleTicks type definition to .setMinorTickStyle((tickStyle: VisibleTicks) => tickStyle.setGridStrokeStyle(emptyLine)),

 .setTickStrategy(
        // Use Numeric TickStrategy as base.
        AxisTickStrategies.Numeric,
        // Use mutator to modify the TickStrategy.
        (tickStrategy) =>
            tickStrategy
                // Modify Major Tick Style by using a mutator.
                .setMajorTickStyle((tickStyle) => tickStyle.setGridStrokeStyle(emptyLine))
                // Modify Minor Tick Style by using a mutator.
                .setMinorTickStyle((tickStyle: VisibleTicks) => tickStyle.setGridStrokeStyle(emptyLine)),
    )