Stock Chart animation

[workingbuddy10]

Ideal case : I want the zoom-in/scroll looks like this smooth in my stock Charts.

https://github.com/amcharts/amcharts5/assets/137867461/834cd04f-6d5d-4a24-beed-695a8bd4a151

When I use animated theme and use on-demand loading the candles shakes like this, rest other animations are fine :

https://github.com/amcharts/amcharts5/assets/137867461/a5bc76e9-4cac-41d0-8d5f-c86cefd0350e

But when I don't use animated theme, the zoom-in via mouse scroll is way too fast but when I zoom-out it feels lag : In the middle of video there was a pause even though I was scrolling.

https://github.com/amcharts/amcharts5/assets/137867461/7643e972-1767-4b4c-9cec-da5b3f958524

My Theme currently looks like :

    var instance = am5.Root.new("chartdiv-" + this.chartStore.uid + "-" + this.index);

    this.instance = instance;
        setupDefaultRules() {
      this.rule("RoundedRectangle", [
        "legend",
        "itemcontainer",
        "background",
        "stocklegend",
      ]).setAll({
        fillOpacity: 0,
      });
      this.rule("AxisTick").setAll({
        stroke: am5.color(0xffffff),
        visible: true,
      });
      this.rule("Container", ["legend", "itemcontainer", "stocklegend"]).setAll({
        paddingRight: 0,
        paddingTop: -20,
        paddingBottom: 17,
        paddingLeft: -10,
      });
      this.rule("Graphics", ["series", "fill", "drawing"]).setAll({
        forceInactive: true,
      });
    }

    instance.setThemes([
      // am5themes_Animated.new(instance),
      myTheme,
      am5themes_Dark.new(instance),
    ]);

    var stockChart = instance.container.children.push(
      am5stock.StockChart.new(instance, {
        paddingRight: 6,
        interactive: true,
      })
    );
    this.stockChart = stockChart;

    instance.utc = true;

    var mainPanel = stockChart.panels.push(
      am5stock.StockPanel.new(instance, {
        wheelY: "zoomX",
        panX: true,
        panY: true,
        height: am5.percent(90),
      })
    );
    this.mainPanel = mainPanel;

[workingbuddy10]

I want the scroll/zoom-in/out feel like TradingView. If not exactly same, then at least close to ...

[p3777dev]

How to reduce the animation of am5themes_Animated in stock chart in GaplessDateAxis.

[zeroin]

Try setting interpolationDuration:0 on you x and y axes.

[workingbuddy10]

@zeroin Did that. Though it improved a little bit.

But in this when I scroll or zoom-in/out sometimes the mouse / cursor gets stuck (IF we are not moving the mouse only scrolling via scroll). And if I just move the mouse it again gets fixed.

[zeroin]

What if you set interpolationDuration:1 ?

[workingbuddy10]

I have set it to 10.

@zeroin

[workingbuddy10]

See in the below video I was continuously scrolling but wasn't moving the mouse, when the cursor is exactly on the tooltip it doesn't scroll it just gets freeze. In this case If I move the mouse a little bit then it will work.

• Initially the cursor was on the tooltip then the chart was not moving.
• Then I moved the mouse position, it started working.
• Again I tried to put the cursor on the tooltip in the last, and chart didn't moved.

https://github.com/amcharts/amcharts5/assets/137867461/cebd11d7-2e93-40aa-8c28-ec74813c6174

@zeroin

[workingbuddy10]

For testing you can use the below codepen :

• Keep the cursor pointer on the tooltip point/arrow. Or just place the pointer on the tooltip
• And then don't move the mouse just scroll. At this point you won't be able to scroll.
• Later if you move the mouse now you will able to zoom-in/out.

codepen : https://codepen.io/Ansh-m-the-reactor/pen/KKEEGaq?editors=1010

@zeroin

[zeroin]

Removing keepTargetHover: true fixes the problem, this setting doesn't do anything in your case anyway.

[workingbuddy10]

See in the below video I was continuously scrolling but wasn't moving the mouse, when the cursor is exactly on the tooltip it doesn't scroll it just gets freeze. In this case If I move the mouse a little bit then it will work. @zeroin

True @zeroin , as I don't even have keepTargetHover property in my chart! Then any suggestion which you like to provide, how to fix this?

[workingbuddy10]

By the way it is still lagging/freezing the scrolling when I exactly point between the candle open and the pointer of the tooltip.

PS: I have removed the property.

Tryout https://codepen.io/Ansh-m-the-reactor/pen/KKEEGaq?editors=1010

Exactly at this point :

@zeroin

[zeroin]

I think adding forceInactive:true for the series tooltip should solve the problem.

[workingbuddy10]

Perfect @zeroin forceInactive:true worked for me!!! Thank you!