Chart goes out of the parent div

[mreorhan]

When the page loaded first time, charts going out the div. And I cant change the height of charts. (like auto)

[junedchhipa]

Can you please create a minimal codesandbox demo of the issue?

[mreorhan]

Can you please create a minimal codesandbox demo of the issue?

Im using with vuetify. So thats ready component. I didnt change anything. I couldnt create with codesandbox.

[ghost]

Same problem here. I assume you also want to put your apexchart into a v-card such as in this short example:

<v-card>
    <v-card-title class="overline">
      {{ title }}
    </v-card-title>
    <v-card-text v-if="loaded">
    <apexchart :type="type" :options="options" :series="series"></apexchart>
    </v-card-text>
  </v-card>

Any suggestion about how to force the apexchart to always stay withing the v-card-text boundaries and completely fill its width/height?

[AhmedSHelmi]

For the time being, here is a hacky workaround that worked for me:

Template:

 <v-col lg="3" md="6" cols="12" class="pt-0">
<!-- Using v-card classes in template -->
<!-- Class "pie" created to simulate cards behavior -->
          <div
            class="v-card v-card--link v-sheet v-sheet--tile theme--light pie"
            style="height:200px;max-height:200px;"
          >
             <apexchart type="pie" :options="chartOptions" :series="series"></apexchart>
          </div>

Style:

.pie:hover {
  box-shadow: 3px 3px 3px 3px rgb(177, 175, 175);
  transition: all 0.4s ease-out;
}

[ludwig-loth]

OK I know It's been a while. Has anybody found a solution yet?