Search code examples
javascriptcssvue.jsapexcharts

apexchart width overflows or doesn't strech

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:

enter image description here

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

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

Thanks

Solution

  • I figured out that the gap after resizing is due to missing data in the series and the fact that I have set a max attribute for the x axis.

    So that solved issue #2.

    Apparently the charts render before it should, so it doesn't get the right parent's width, a workaround that solved it for me was to not render the chart after the component is mounted.