Apexcharts data is not shown initially and after refresh

[vhniii]

I have vue application where data is passed to apexchart from vuex. The problem is with displaying data on chart while initially going to a page which uses the component where apexchart is used. If I go back to home page and then back to the page where the chart is then data is showing. but after refresh data is again not showing. ` My component:

<template> 
     <div>
        <div class="item-chart">
            <apexcharts type="area" class="apexChart" width="100%" height="400px" :options="chartOptions" :categories="categories" :series="series"></apexcharts>
        </div>

        <div class="btn-back">
            <router-link to="/">Back</router-link>
        </div>
    </div>
</template>

<script>
import VueApexCharts from "vue-apexcharts";

export default {
    name: 'currency',
    components: {
        apexcharts: VueApexCharts
    },
    data() {
        return {
            chartOptions: {
                chart: {
                    id: 'chart',
                    toolbar: {
                        show: false
                    }
                },
                xaxis: {
                    categories: [],
                    labels: {
                        style: {
                            colors: '#F1C40F'
                        }
                    }
                },
                yaxis: {
                    show: false
                },
                dataLabels: {
                    enabled: false
                },
                colors: ['#F1C40F']
            },
            series: [{
                name: 'Price',
                data: this.$store.state.currencyHistory.BTC.map(i => i.close),
            }]
        }      
    },
    created() {
        this.getCryptoCurrencyData()
        this.getCurrencyHistory()
        this.chartOptions.xaxis.categories = this.Times
    },
    methods: {
        getCryptoCurrencyData() {
            this.$store.dispatch('getCryptoData')
        },
        getCurrencyHistory() {
            this.$store.dispatch('getCurrencyHistory')
        },
        getChartPrices() {
            this.currencyHistory.BTC.map(i => i.close)
        },
        getChartTimes() {

            const data = [];
            this.$store.state.currencyHistory.BTC.map(i => {
                let time = new Date(i.time * 1000);
                data.push(time.toLocaleString('en-US', { hour: 'numeric', hour12: true}))
            })

            return data;
        }
    },
    computed: {
        cryptoCurrencyData() {
            return this.$store.getters.showCryptoData
        },
        currencyHistory() {
            return this.$store.getters.showCurrencyHistory
        },
        Times() {
            return this.getChartTimes()
        }
    }
}
</script>

Also why I canno't give data from vuex store to apexchart with getters, its just not working. (I have to use "this.$store.state").

I would like to know how to fix the problem where data will be showed every time (even if I go to the page first time after running the app) and also showed after refresh.

Thank you in advance

[woutvw]

I have the same problem, the chart only shows when I resize the browser. Have you found a sollution already?

[theDevelopper]

Any updates on this one. I have the same issue with line charts. My line charts are not drawing until I resize the browser. Other chart types like bar and pie work fine.

[firedev]

I got it to work by triggering window.resize manually after updating series:

window.dispatchEvent(new Event('resize'))

[wirakw2]

@firedev how you trigger it ?

[KayJay89]

@firedev how you trigger it ?

For use with Vuex (not sure this is what you need though), you can use @firedev's solution by including

window.dispatchEvent(new Event('resize'))

in your mutation like so:

NAME_OF_MUTATION: (state, dataToAdd) => {
      state.nameOfDataInStore = dataToAdd;
      window.dispatchEvent(new Event("resize"));
    },

I'm doubtful this a good practice but this is the only way I could get the charts to update using Vuex.

As to @vhniii's point of not being able to pass store data using getters, that does work on my end perfectly fine.

EDIT:

Actually guys, seems like it works after all and I was doing something wrong (not surprising).

Found the answer in the documentation:

When applying the above for update of chart options, the data loads properly without the need for a hacky manual window event.

[FelixWaigner]

Any solutions on this problem yet?

[theolevisage]

@KayJay89 Which doc are you referring to please ? I can't find that bit in the apex chart doc in the Vue.js section or even in the updateChart part...

I'm still having this issue and I have to resize to get the data, I'm using the Vuex and I don't see where I'm doing wrong (although there is probably a lot I'm doing wrong haha)

My chart options and series are fully in the vuex and I'm just inserting them into my apexchart component with mapGetters but my chart is empty on load and doesn't update the data after I mutated the state.

If anybody has a solution that would be great.

[ridwankustanto]

window.dispatchEvent(new Event('resize'))

Thanks! It works for me

[Herant]

Is there really no other way to make charts reactive than to call resize event?

[gdagrech]

The only way I could solve the problem of rendering an empty board even when the child receives the info was by adding an ngIf directive.

That way it doesnt matter how many time you refresh the page it will always render the chart correctly

[otherperspectives]

window.dispatchEvent(new Event('resize'))

This workes like a charm. Thanks!!!

[DennisMwongera]

My Donut chart renders for a sec then disappears, when I switch the view tab to a bar chart once then I return to the donut chart it renders well this time round My data comes from the store

[drewm1192]

@DennisMwongera This is exactly what is happening to me with a radial bar chart and I cannot figure out why. I would have assumed the issue is with getting the data when componentDidMount() runs, but the other visuals populate with the same dataset, so it has to be an Apex issue... (I'm using React).

[5Sense-PhuocLoiTran]

Any solutions on this problem when refresh yet?

[DennisMwongera]

When Using React, try giving your series Array some data to work with like series: [ 1, 1, 1, 1, 1 ] this will communicate to the chart there is some data to work with until the store loads up the data and updates your series(React) @drewm1192 @5Sense-PhuocLoiTran

[DennisMwongera]

For me am using Vue still trying to figure out a way through

[raysubham]

When Using React, try giving your series Array some data to work with like series: [ 1, 1, 1, 1, 1 ] this will communicate to the chart there is some data to work with until the store loads up the data and updates your series(React) @drewm1192 @5Sense-PhuocLoiTran

This worked for me perfectly! Thank you so much! I had to add data in the series instead of a empty array and also add Resize Event Dispatcher line mentioned earlier in the thread.

[cflurin]

I had a similar issue with the latest apexcharts version 3.30.0, downgrating to v3.22.2 solved the issue for me.

[MinSomai]

I have been using keys in each chart component to force render. It was working fine.

As alternative, this also works. downgrade apexcharts and vue-apexcharts to these specific versions. I tried downgrading only one of them and the problem persists.

"apexcharts": "3.24.0", "vue-apexcharts": "1.5.3",

[cflurin]

Here my latest working versions:

apexcharts v3.29.0 vue-apexcharts v1.6.2

[cflurin]

I have been using keys in each chart component to force render. It was working fine.

Hi, how did you use keys, can you post an example.

[MinSomai]

Hi, how did you use keys, can you post an example.

set key <apexchart :key="testKey"/>

data testKey = 1;

update options/series then change testKey like so, and it will force render the component testKey++;

[cflurin]

Thanks, I tried a similar approach (new_data) but it didn't work with apexcharts v3.30.0

[MinSomai]

Thanks, I tried a similar approach (new_data) but it didn't work with apexcharts v3.30.0

you have to manually trigger key change testKey++ after you load options and series.

you can try refresh too. like this

<apexchart ref="myChart"/>

manually, somewhere in your method this.$refs.myChart.refresh()

[cflurin]

Okay, I'll try. Anyway with v3.29.0 it works for me without any additional code.

[sobancodes]

I just had a similar issue that the chart was only showing data when I resized the browser. Here is how I solved it for my use case through experimentation and some help from the documentation. First, add a ref on apexcharts component.

<apexcharts type="area" ref="apexChart" class="apexChart" width="100%" height="400px" :options="chartOptions" :categories="categories" :series="series" />

then call updateSeries or updateOptions or both depending upon the use case.

this.$refs.apexChart.updateSeries(this.response.series); this.$refs.apexChart.updateOptions({ xaxis: { categories: this.response.labels, } })

on the page visit or whenever the data is not loading basically. I had to do it in watcher since in my case the data was not updating after an API call. But, I have not tested this with the router.

Version: 3.31.0

[rognales]

This is still happening. I have to pinned to 3.29 as shared to resolved this.

[greenyboiz]

<div style="margin-left: -14px" v-if="!isEmpty"> <VueApexCharts height="240" :options="chartOptions" :series="series" /> </div> <div style="margin-left: -14px" v-else> <VueApexCharts height="240" :options="chartOptions" :series="ratioEmpty" /> </div> at else case, it still doesnt render anything iniatially but when resize the window, it goes, (my "ratioEmpty" contains object {x: '70', y: 0} ). Please help me out this case :((

[MinSomai]

<div style="margin-left: -14px" v-if="!isEmpty"> <VueApexCharts height="240" :options="chartOptions" :series="series" /> </div> <div style="margin-left: -14px" v-else> <VueApexCharts height="240" :options="chartOptions" :series="ratioEmpty" /> </div> at else case, it still doesnt render anything iniatially but when resize the window, it goes, (my "ratioEmpty" contains object {x: '70', y: 0} ). Please help me out this case :((

from your comment this is what I think is the issue. series (ratioEmpty in your case) takes an array and not an object.

examples:

series: [{
          name: 'series-1',
          data: [30, 40, 35, 50, 49, 60, 70, 91]
        }]

or

series:[{
  data: [23, 34, 12, 54, 32, ... , 43]
}]

or for pie charts

series: [23, 11, 54, 72, 12],

[greenyboiz]

<div style="margin-left: -14px" v-if="!isEmpty"> <VueApexCharts height="240" :options="chartOptions" :series="series" /> </div> <div style="margin-left: -14px" v-else> <VueApexCharts height="240" :options="chartOptions" :series="ratioEmpty" /> </div> at else case, it still doesnt render anything iniatially but when resize the window, it goes, (my "ratioEmpty" contains object {x: '70', y: 0} ). Please help me out this case :((

from your comment this is what I think is the issue. series (ratioEmpty in your case) takes an array and not an object.

examples:

series: [{
          name: 'series-1',
          data: [30, 40, 35, 50, 49, 60, 70, 91]
        }]

or

series:[{
  data: [23, 34, 12, 54, 32, ... , 43]
}]

or for pie charts

series: [23, 11, 54, 72, 12],

thanks for your reply, actually, my ratioEmpty is an array containing some of that object like that to handle the null value of the y-axis. Update: I found the issue, that's all my stupid fault. Thank you

[rodpatulski]

This is also an issue with reactapexcharts

[pradeepbp1310]

I was also facing the same issue, fixed it by using a toggle variable in which the initial value isChartLoading = false and making it true after updating the series.

<ng-container *ngIf="isChartLoading">
      <apx-chart
        [series]="chartOptions.series"
        [chart]="chartOptions.chart"
        [colors]="chartOptions.colors"
        [labels]="chartOptions.labels"
        [legend]="chartOptions.legend"
        [dataLabels]="chartOptions.dataLabels"
        [plotOptions]="chartOptions.plotOptions"
        [stroke]="chartOptions.stroke"
        [responsive]="chartOptions.responsive"
        [tooltip]="chartOptions.tooltip"
      >
      </apx-chart>
</ng-container>

[NazliTb]

For me am using Vue still trying to figure out a way through

@DennisMwongera did you find a solution in Vue so far ? I am also having this issue where I have to resize the browser to be able to see my chart/data. If you or anyone else found a way through it for Vue please share it here. Thank you.