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

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]

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.

[junedchhipa]

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