Apexcharts.js: <rect> attribute width: A negative value is not valid.

[availit]

Hi,
I'm using Apexcharts in a Vue 2 project and currently calling the render() method within the component mounted() method. Now I get the two charts to render however it only displays on hot-reloading after saving new changes to a file. Not when the page hard-reloads.

I receive this error when the page with the charts loads from a page refresh:

apexcharts.min.js?2227:1 Error: <rect> attribute width: A negative value is not valid. ("-2.45")

this is my markup:

<div>
   <div ref="linechart"></div>
   <div ref="barchart"></div>
</div>

Here is what my chart data looks like:

data: () => {
    return {
      chartOne: {
        chart: {
          type: 'line',
          height: 380
        },
        stroke: {
          width: 3,
          curve: 'smooth'
        },
        series: [{
          name: 'sales',
          data: [ 30, 40, 35, 50, 49, 60, 70, 91, 125, 150 ]
        }],
        xaxis: {
          categories: [ 'JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC' ]
        }
      },
      chartTwo: {
        chart: {
          type: 'bar',
          height: 380
        },
        series: [{
          name: 'sales',
          data: [ 30, 40, 35, 50, 49, 60, 70, 91, 125, 150 ]
        }],
        xaxis: {
          categories: [ 'JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC' ]
        }
      }
    }

Here is what my mounted() function looks like:

let chart = new ApexCharts(this.$refs.linechart, this.chartOne)
    chart.render()
let barchart = new ApexCharts(this.$refs.barchart, this.chartTwo)
    barchart.render()

Any idea what's happening here? I'm so confused what's causing this error

[junedchhipa]

I am almost done creating the vue.js wrapper for ApexCharts.
I will test this bug too in the same project, wait for 1 or 2 days max :)

[availit]

Awesome! Can't wait to test it out..
Meanwhile, I found a weird workaround by wrapping the render code in a setTimeout function which looks like this:

setTimeout(() => {
        let chart = new ApexCharts(this.$refs.linechart, this.chartOne)
        chart.render()
        let barchart = new ApexCharts(this.$refs.barchart, this.chartTwo)
        barchart.render()
      }, 1)

[junedchhipa]

@availit I tried your same code in the following codepen, and it works just fine.
On my local environment too, your code works.
Anyways, good thing you got it working on your side.

[availit]

@junedchhipa Yes, without the setTimeout I get that error when reloading the page, however if I just navigate to it from within the app it loads fine.. Maybe it's a conflict with another component? I am using Vuetify library but I don't believe that would effect it.

[junedchhipa]

@availit Released the Vue.js version https://github.com/apexcharts/vue-apexcharts
Let me know if the problem exists in this too.

[availit]

@junedchhipa Hey I just refactored what I had setup previously using the vue version. It works great, thanks! Much cleaner integration using the imported components than initializing it manually with life-cycle methods.
The data and options are structured slightly different but I figured it out.. would be cool if the examples in the main library were also shown using the vuejs version but all in good time 👍 Much appreciated!

[junedchhipa]

Thanks for the feedback. I agree examples are essential as the vue-apex docs are currently lacking a lot of details.
I will add more information in README as well as create a page dedicated just for vue.js integration.