Width property is overridden by component when using percentage

[selfagency]

Despite being set to default, in the VueApexCharts component, to a width of 100%,* and despite manually setting a width of 100%, the VueApexCharts canvas object is always set to a specific width of 300px. If I set it to a pixel width, such as 500px, it works. But I cannot get it to work with any percent value (eg., 25%), and thus be naturally responsive to the width of the parent container. This is the case whether I specify the width in the props or in the options object (which doesn't seem to respect either height or width settings).

<template>
  <widget-base type="graph" :title="title" :icon="icon" :date="date">
    <chart height="150" width="100%" :options="graphOpts" :series="graphData"></chart>
  </widget-base>
</template>

<script>
import dayjs from 'dayjs'
import VueApexCharts from 'vue-apexcharts'
import WidgetBase from './WidgetBase'

const fontFamily = 'Inter, Arial, Helvetica, sans-serif'

const fmtDate = date => {
  return dayjs(date).format('MMM D')
}

export default {
  name: 'WidgetGraph',
  components: {
    Chart: VueApexCharts,
    WidgetBase
  },
  props: {
    title: {
      type: String,
      default: undefined
    },
    icon: {
      type: String,
      default: undefined
    },
    data: {
      type: Array,
      default: () => []
    },
    label: {
      type: String,
      default: undefined
    },
    date: [Date, String]
  },
  computed: {
    graphData() {
      return [
        {
          name: this.label,
          data: [...this.data]
        }
      ]
    },
    graphOpts() {
      return {
        chart: {
          type: 'area',
          sparkline: {
            enabled: true
          }
        },
        xaxis: {
          type: 'datetime'
        },
        stroke: {
          curve: 'straight'
        },
        fill: {
          opacity: 0.3
        },
        dataLabels: {
          enabled: false
        },
        title: {
          text: this.yTotal(),
          style: {
            fontSize: '32px',
            fontFamily
          }
        },
        subtitle: {
          text: `${fmtDate(this.data[0].x)} – ${fmtDate(this.data[this.data.length - 1].x)}`,
          margin: 20,
          style: {
            fontSize: '12px',
            fontFamily
          }
        },
        tooltip: {
          style: {
            fontFamily
          }
        }
      }
    }
  },
  methods: {
    yTotal() {
      let total = 0
      this.data.forEach(point => (total = total + point.y))
      return total
    }
  }
}
</script>

The result of the above:

<div data-v-c4b6ea36="" style="min-height: 150px;">
  <div
    id="apexcharts2inyqbox"
    class="apexcharts-canvas apexcharts2inyqbox apexcharts-theme-light"
    style="width: 300px; height: 150px;"
  >
    <svg
      id="SvgjsSvg1188"
      width="300"
      height="150"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns:svgjs="http://svgjs.com/svgjs"
      class="apexcharts-svg"
      xmlns:data="ApexChartsNS"
      transform="translate(0, 0)"
      style="background: transparent;"
    >
    [...]
  </div>
</div>

*This is from the code of your component itself:

export default {
  props: {
    [...],
    width: {
      default: "100%"
    },
    height: {
      default: "auto"
    }
  },
  [...]
}

As you can see, the width is being specified as 300px despite my component being fed a width of 100%.

[FullMe7alJacke7]

Also had this same issue. Did you ever find a solution?

Is this something we can get taken care of or will we need to do a PR?

[Jarkovato]

same problem, need fix

[marioBaltiSolar]

I am also having the same problem and i didn't find a solution yet

[devberkay]

same problem stills exists i guess.

[guxuerui]

Hi, my vue version is 3.2.37 and vue3-apexcharts version is 1.4.1, and I tested this in my repo, it works fine.

[devberkay]

it occurs only when parent is a flex. I am using nuxt 3.4

[guxuerui]

it occurs only when parent is a flex. I am using nuxt 3.4

When parent is a flex, maybe you should set the child component width with a fixed value like 600px or 100%?

[devberkay]

yes i have tried that and many other combinations but not working, it is also discussed here :

https://github.com/apexcharts/apexcharts.js/issues/1077

[devberkay]

i just solved it with this combination:

<ClientOnly>
    <div class="w-[100%] h-[75%]">
      <apexchart
        :options="options"
        :series="series"
        height="75%"
        type="area"
        width="100%"
      />
    </div>
  </ClientOnly>