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

in a way. I'm using vuetify's grid. but its 3-4 level above the chart. — dor272, Sep 29 '20 at 20:37
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. now after resize it takes 100% like it should but on first render it overflows. I found this issue https://stackoverflow.com/questions/55326858/apex-charts-dont-resize-properly-when-using-flexbox but in my case there are no errors of failing to get the parent node. — dor272, Sep 30 '20 at 07:22

score 12 · Answer 1 · answered Apr 21 '21 at 04:32

12

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

answered Apr 21 '21 at 04:32

Abed abuSalah

156
2
5

1

Thank you so much. I don't know why it works, but it solved my issue! – yoges nsamy Jul 21 '21 at 11:38

score 2 · Accepted Answer · answered Oct 01 '20 at 06:56

2

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.

answered Oct 01 '20 at 06:56

dor272

550
1
6
26

1

Hi, can you show how to solved the problem? I'm using vuetify v-flex for the apexchart but facing the same problem. – luvwinnie Jan 10 '22 at 07:18

score 0 · Answer 3 · answered Jan 05 '23 at 13:23

0

you can do xaxis: { tickPlacement: "between", }, by defalut it is "On",

it just places you data in between so you can see a little space on left & right end of the x axis.

answered Jan 05 '23 at 13:23

Rahul Solanki

1

score 0 · Answer 4 · answered Jun 17 '23 at 12:52

0

If you're using flex on your container and you can't stop using it try using max-width: 100% !important; in this container - works for me.

answered Jun 17 '23 at 12:52

ivall

27
7

score -1 · Answer 5 · edited Sep 20 '21 at 21:10

-1

chart: {
    width: '100%'
}

this might fix your issue

my issue resolved using this method ref

edited Sep 20 '21 at 21:10

atiquratik

1,296
3
27
34

answered Sep 20 '21 at 12:12

user16957196

1

apexchart width overflows or doesn't strech

5 Answers5