search

highcharts / highcharts-vue

Other
686 stars 150 forks source link

How to show Chart loading #100

Closed cyberfly closed 5 years ago

cyberfly commented 5 years ago

Hi i'm using Axios to fetch series data. It will take a couple of seconds to fetch the data.

How can I show loading indicator before Axios finishing the request using HighChart Vue?

Saw Jquery example on the web but not sure how to implement it using HighChart Vue.

Thanks

Denyllon commented 5 years ago

Hi @cyberfly

Thank you for asking question. The easiest way to show "Loading..." indicator before axios return the data, is by setting it on the chart init, namely using chart.events.load and calling Chart.showLoading() within function handler. I've prepared the demo with Vue highcharts wrapper, where imitate the axios request, so please take a look on it.

Live example: https://codesandbox.io/s/highcharts-vue-demo-xcp0g API Reference: https://api.highcharts.com/highcharts/chart.events.load

Kind regards!

cyberfly commented 5 years ago

Thanks @Denyllon you are a live saver :)

alecellis1985 commented 3 years ago

If u have too many data to render this makes no sense at all as it will take more than 2 seconds to render.