apexchart recursion bug using type="rangeBar", xaxis type=datetime, and v3 vue.js

[Spalata]

Please consider following steps to reproduce the apexchart rangeBar recursion bug using v3 vue.js! package.json stub:

"dependencies": { "apexcharts": "^3.32.1", "core-js": "^3.6.5", "register-service-worker": "^1.7.1", "vue": "^3.0.0", "vue-router": "^4.0.0-0", "vue3-apexcharts": "^1.4.1", "vuex": "^4.0.0-0" },

Test steps:

1. Create a simple v3 vue.js web project (vue create testApexchart)
2. npm install --save apexcharts
3. npm install --save vue3-apexcharts
4. Include following sample to you view (vue file)
5. npm run serve, open browser and see console log: [Vue warn]: Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

Code: <apexchart width="500" type="rangeBar" :options="options" :series="series"></apexchart>

export default { name: "About", components: { }, data: function() { return { options: { chart: { id: "vuechart-example" }, plotOptions: { bar: { horizontal: true, } }, xaxis: { type: "datetime" } }, series: [{ data: [ { x: "Analysis", y: [ new Date("2019-02-27").getTime(), new Date("2019-03-04").getTime() ] }, { x: "Design", y: [ new Date("2019-03-04").getTime(), new Date("2019-03-08").getTime() ] }, { x: "Coding", y: [ new Date("2019-03-07").getTime(), new Date("2019-03-10").getTime() ] }, { x: "Testing", y: [ new Date("2019-03-08").getTime(), new Date("2019-03-12").getTime() ] }, { x: "Deployment", y: [ new Date("2019-03-12").getTime(), new Date("2019-03-17").getTime() ] } ] }], } } }

[Spalata]

i had no issues using this code with v2 vue.js

[jdhaines]

I'm seeing this same issue with code I copied from a previous working project. I can't seem to track down anything. If I comment out the <apexchart> component then the recursive error is gone. I've done console prints throughout the setup function area and can't find anything being called. It looks like it's happening somewhere within the apex component itself?

The options and series props look good prior to being passed to the component.

Series:

[
  {
    "data": [
      {
        "x": "Idea to Code",
        "y": [
          1547942400000,
          1548028800000
        ],
        "fillColor": "#006dff"
      },
      {
        "x": "Code to Live",
        "y": [
          1548028800000,
          1548201600000
        ],
        "fillColor": "#00bfbd"
      },
      {
        "x": "Live to MVP",
        "y": [
          1548201600000,
          1548374400000
        ],
        "fillColor": "#c15eff"
      },
      {
        "x": "MVP to Prod",
        "y": [
          1548374400000,
          1548547200000
        ],
        "fillColor": "#ff7140"
      }
    ]
  }
]

options:

{
  "chart": {
    "height": 350,
    "type": "bar"
  },
  "plotOptions": {
    "bar": {
      "horizontal": true,
      "distributed": true,
      "dataLabels": {
        "hideOverflowingLabels": true,
        "position": "center"
      }
    }
  },
  "dataLabels": {
    "enabled": true,
    "style": {
      "colors": [
        "#efeff4",
        "#fff"
      ]
    }
  },
  "xaxis": {
    "type": "datetime"
  },
  "yaxis": {
    "show": true
  },
  "grid": {
    "row": {
      "colors": [
        "#efeff4",
        "#fff"
      ],
      "opacity": 1
    }
  },
  "tooltip": {
    "x": {
      "format": "dd MMM yyyy"
    }
  },
  "title": {
    "text": "Project Timeline",
    "align": "left",
    "style": {
      "color": "#8a8a8a",
      "fontWeight": "600",
      "fontSize": "1.25rem"
    },
    "floating": true,
    "offsetY": 20,
    "margin": 20
  }
}

I'm using the following versions in case it helps:

"node": "16.13.1",
"yarn": "1.22.17",
"apexcharts": "3.32.1",
"vue3-apexcharts": "1.4.1",
"vue": "3.2.26",
"vite": "2.7.6"

Same error as above: [Vue warn]: Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

Thanks for any help!

Edit: It looks like #19 might be related.

[GetUsernameFromDatabase]

This seems to work for me. Not sure how well it works past initial load

<apexchart
      ...
      :series="toRaw(seriesData)"
    ></apexchart>

Thought came after scouring through vue API

[placid2000]

@GetUsernameFromDatabase Thank you. That resolved the problem for me.

I was experiencing the same issue for the chart type "rangeArea" which has newly been implemented.

It looks like the data passed to the series must not be wrapped in a proxy object.

[Cherpavp]

Same problem, VUE 3 + ApexCharts rangeBar.

[mucrolores]

Encountering sampe problems with vue 3 on apexcharts rangeArea plots.

[Guziq]

Same error, but the @GetUsernameFromDatabase fix helped me though.

[mdima]

Same here, toRaw solved the problem for now. Thanks!

[Avarow]

Same issue with rangeArea chart, using toRaw solved the problem.

[ShoryuKyzan]

I resolved it similarly by not using a reactive variable. Using a reactive variable for series was bad because rangebar chart is mutating that object, causing the reactive watchers to fire, etc.

[sxc731]

Also encountered this issue with rangeBar. toRaw() does solve the error but because my data is retrieved asynchronously, the graph wouldn't display since toRaw() disables Vue's reactive behaviour.

I worked around this new issue by following this trick; ie:

1. I added a :key="refreshKey" attribute to the <apexchart> component
2. Declared as const refreshKey = ref(0)
3. Once the data is available and has been inserted into the chart's series structure, simply increment the trigger as refreshKey.value += 1

[Pedrocanoas]

This seems to work for me. Not sure how well it works past initial load

<apexchart
      ...
      :series="toRaw(seriesData)"
    ></apexchart>

Thought came after scouring through vue API

i'm trying to use toRaw() but i'm still getting error Property 'toRaw' does not exist on type. i'm doing something wrong?

"vue": "^3.0.0",
"vue-chartjs": "^5.3.0",
"vue3-apexcharts": "^1.4.4"

seriesData: [{
    name: 'series-1',
    data: [{
        y: 'TEAM A',
        x: [65, 96]
    },
    {
        y: 'TEAM B',
        x: [55, 78]
    },
    {
        y: 'TEAM C',
        x: [95, 186]
    }]
}]