apexchart width overflows or doesn't strech

Question

I'm using apexcharts with vue. I want the sparkline graph to take 100% of the width of it's parent.

So this is what I did:

<div>
  <apexchart
    :options="chartOptions"
    :series="series"
    height="150"
    style="width: 100%"
  />
</div>

I tried also to set the width as a prop of the component but it behaves the same.

Here are my chart options:

chartOptions: {
   chart: {
       type: 'area',
       sparkline: {
           enabled: true
       }
   },
   dataLabels: {
       enabled: false
   },
   stroke: {
       curve: 'straight',
       width: 3,
   },
   xaxis: {
       type: 'datetime',
   }
}

So nothing special here, it is copied from apex dashboard example, the only thing I've added is trying to set the width 100%.

It overflows it's parent (green) and the parent's container (yellow) as shown here:

But also when I resize the window(without refresh) it doesn't retain its size, it becomes smaller than the parent:

How can I make it fill the width of it's parent (green container) and keep it that way (responsive)?

Thanks

Answer 1

I had the same issue, I just removed display: flex on the container and that resolved the issue :)

Answer 2

I used the following option and it worked:

const chartOptions = {
    chart: {
      events: {
        mounted: (chart) => {
          chart.windowResizeHandler();
        }
      }
    }
  };