CODEWITHSUNDEEP
vuejs3apexcharts
TDawg
TDawg

Reputation: 883

ApexCharts not correct until resizing window

I have VueJS ApexCharts, 2 charts on the page. On initial load, both are wrong. If I resize the page, they are correct, so data is passed correctly. Its related to the presentation of the component. Any idea where to look?

      <apexchart
            width="80%"
            type="pie"
            :options="chartOptions"
            :series="series"
          ></apexchart>

    <apexchart v-if="historySeries"
        width="100%"
        height="100%"
        type="bar"
        :options="historyChart"
        :series="historySeries"
      ></apexchart>

Upvotes: 0

Views: 3012

Answers (2)

TwilightJ&#228;ger
TwilightJ&#228;ger

Reputation: 31

this is my first ever answer on stack overflow.

The solution is very simple : you just need to add a :key="series.length"

the important things is to have a unique key for the chart so it is not rendered twice.

Example of a possible solution

1

Upvotes: 3

TDawg
TDawg

Reputation: 883

Solution was to use refs, document hinted ref needed if doing realtime data, but I wasn't sure how to get it in my page

<apexchart width="80%"
        ref="realtimePie"
        type="pie"
        :options="chartOptions"
        :series="series"
      ></apexchart>

Then in my JS area

const realtimePie = ref()
realtimePie.value.updateSeries(series)
return {realtimePie}

Upvotes: 0

Related Questions