CODEWITHSUNDEEP
reactjsamcharts
smooth97
smooth97

Reputation: 91

React Amchart - How to remove animation when loading charts

I am using amcharts in the React Hooks environment.

I'm using force-directed-tree. https://www.amcharts.com/demos/force-directed-tree/

The data applied to the chart is filtered based on high values and then reapplying. Every time the data is reapply, the chart is rendered and the animation continues to be applied.

How to remove animation when loading charts

Or we would appreciate it if you could tell us how to apply the scrollbar provided by amcharts to this chart.

    useEffect(() => {
        const chart = am4core.create('networkChart', am4plugins_forceDirected.ForceDirectedTree);
        const networkSeries = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries());
        chart.data = data;
        chart.dataSource.updateCurrentData = true;
        chart.animationPlayed = true;
        chart.dataSource.reloadFrequency = 1000;

        networkSeries.dataFields.id = 'name';
        networkSeries.dataFields.value = 'value';
        networkSeries.dataFields.name = 'name';
        networkSeries.dataFields.children = 'children';
        networkSeries.nodes.template.tooltipText = '{name}:{value}';
        networkSeries.nodes.template.fillOpacity = 1;
        networkSeries.manyBodyStrength = -20;
        networkSeries.links.template.strength = 0.8;
        networkSeries.links.template.distance = 1;
        networkSeries.minRadius = am4core.percent(3);
        networkSeries.maxRadius = am4core.percent(10);
        networkSeries.nodes.template.label.text = '{name}';
        networkSeries.fontSize = 12;
        networkSeries.maxLevels = 4;

        networkSeries.events.disableType('inited', function() {
            networkSeries.animate(
                {
                    property: 'velocityDecay',
                    to: 1,
                },
                3000,
            );
        });

        // Add Legend
        chart.legend = new am4charts.Legend();
        chart.legend.labels.template.fill = am4core.color('#fff');

    }, [data]);

Upvotes: 2

Views: 871

Answers (2)

Mahee Gamage
Mahee Gamage

Reputation: 613

To Add scrollbar

let chart = am4core.create("chartdiv", am4charts.XYChart);

...

let scrollbarX = new am4charts.XYChartScrollbar();
scrollbarX.series.push(networkSeries);
chart.scrollbarX = scrollbarX;

https://www.amcharts.com/docs/v4/tutorials/customizing-chart-scrollbar/

Upvotes: 0

incorelabs
incorelabs

Reputation: 586

I didn't want the these to be used, so I used the unuseTheme and passed the animation theme to it. This removed the animations with respect to the chart.

Example:

am4core.unuseTheme(am4themesAnimated);

Upvotes: 1

Related Questions