Animating x axis range label about amcharts5 HOT 11 OPEN

You can animate any value-based (number, percent or color) via animate() method:
https://www.amcharts.com/docs/v5/concepts/animations/#Animating_settings

It supports a lot of settings, including tween functions, etc. So you might not need D3 animations after all.

If you absolutely need D3, you will need to create your own functions that iterate step through frames, request value from D3 animation functions, and set a relative setting on an amCharts object or dataitem.

In this case, updating valueX on an axis range data item should update its position.

from amcharts5.

I do not see how to that with animate(), I need to tween the number part of the axis range label from zero to its final state

currently am using this code to achieve styling of label

 setTimeout(() => {            
            chartConfig.current.range.get("label").adapters.add("html", (html, target) => {
                return `<div style="text-align: center;">
                        <h2>
                            ${superLabelPrefix ?? getListsTitle(resolution, "Last")}
                            <br />
                            <strong>
                                <span style="color: ${blinkColor}">${superlabel}</span>
                            </strong>
                        </h2>
                    </div>`;
            });

        }, timeout);

from amcharts5.

rangeDataItem.animate({
  key: "value",
  to: value,
  duration: 3000,
  easing: am5.ease.inOut(am5.ease.elastic)
});

from amcharts5.

This would animate the range itself , but i need to animate the label value of the range, and not the range.

when using animate there i get
Type '"value"' is not assignable to type 'keyof IAxisLabelSettings
In my case label is html.

example:

This is working fine in amcharts version 3, but now I am migrating to version 5 and this is the last step :(

from amcharts5.

I can't quite make it. In the video, is what you had in v3 or what you have so far in v5? 🤔

Can you post what you have so far on CodePen or jsFiddle?

from amcharts5.

In the video it is amcharts 3, where I use a selector and d3 to tween,
I added the html label dynamically with absolute positioning after getting the guides position

 const guides = document.querySelectorAll(
    ".amcharts-guide-fill.amcharts-guide-fill-guide-value"
  )[0]
...
const animateSuperLabel = (
  superLabelSelectString: string,
  prevSuperLabel: string,
  superLabel: string
) => {
  select(superLabelSelectString)
    .transition()
    .duration(2500)
    .tween("text", tweenText(prevSuperLabel, superLabel));
};

const tweenText = (prevValue: string, newValue: string) => {
  return () => {
    const i = interpolateRound(prevValue, newValue);
    return function (t) {
      this.textContent = format(",")(i(t)).replace(/,/g, ".");
    };
  };

now in AMcharts 5 I can't use no selectors because everything is in canvas

from amcharts5.

Gotcha. Thanks.

Why can't you do the same to amCharts 5 label? I.e. set chartConfig.current.range.get("label").set("html", ......)

from amcharts5.

how exactly ?

from amcharts5.

Well, you animate a value using D3 (sorry, it's beyond our scope of support) then just set label's html setting with the value being animated.

from amcharts5.