Chart renders instantly when data is pulled asynchronously

[Adrian M]

Chart renders instantly when data is pulled asynchronously. I'm using the useEffects react hook. Initially chart should be empty and when data is available chart should perform an small animation to render the columns

const [data, setData] = useState([]); // definitions

useEffect(() => { // hook
    const fetchData = async () => {
      try {
        setData([{ x: 'Jewellery', y: 75 },{ x: 'Shoes', y: 45 }]);
      } catch (error) { }
    };
    fetchData();
}, []);
  
SeriesDirective  has the dataSource set to data. 


 Copy

https://stackblitz.com/edit/react-2hqnuj9v

[Nishanthi Panner Selvam]

Adrian,

Greetings from Syncfusion.

To achieve the desired effect of displaying an empty chart initially, we can use a setTimeout to introduce a delay during the chart rendering. However, in your scenario, where the chart is initially rendered without data and then the data is updated later using useEffect, but without animation. This is because the chart animation is only triggered during the initial rendering. The chart will not animate during data updates; animations will only occur when the chart is fully refreshed.

Code-snippet:

  useEffect(() => {

    const fetchData = async () => {

      try {

        // Simulate an asynchronous data fetch

        setTimeout(() => {

          setData([

            { x: 'Jewellery', y: 75 },

            { x: 'Shoes', y: 45 },

            { x: 'Footwear', y: 73 },

            { x: 'Pet Services', y: 53 },

            { x: 'Business Clothing', y: 85 },

            { x: 'Office Supplies', y: 68 },

            { x: 'Food', y: 45 },

          ]);

        }, 1000);

      } catch (error) {

        console.error('Error fetching data:', error);

      }

    };

 

    fetchData();

  }, []);

Sample: https://stackblitz.com/edit/react-2hqnuj9v-brlmb4ph?file=index.js

Kindly revert us if you have any concerns.

Regards,

Nishanthi

[Adrian M]

Hi Nishanthi

Sure, but if I refresh the chart (with something like chart.refresh() ), we'll get a flickering effect because the chart is rendered initially without animation than it is erased and then it is rendered correctly with animation.

Also for some reason your example doesn't seem to work for me when I open it in stackblitz. I still see the chart rendered instantly. 

I tried to set up a loading flag but I'm still getting the instant rendering without animation. 

Thanks for helping out,

Adrian

[Nishanthi Panner Selvam]

Hi Adrian,

We have analyzed your query. Based on that, currently animation is only available only on the initial rendering with data. In your scenario, the chart is initially rendered with empty data, and upon refresh, it is re-rendered along with the updated axis range based on the data. This may appear as a flicker or blink. Currently we do not have support for smooth animation during the entire data update when the initial data source is empty. However, we have considered your reported scenario as improvement and logged a feature request on this. Based on other logged tasks priority, we will include this improvement in any of our upcoming release. You can keep track of an improvement from the feedback portal below. 

Feedback: https://www.syncfusion.com/feedback/64952/need-to-provide-the-animation-support-for-series-when-data-change

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.

Regards,

Nishanthi