Search code examples
vue.jsvuetify.jsapexcharts

Center pie chart

I am using a pie chart from Apex to visualize data. Now I would like to center this pie chart in a vuetify card element, but unfortunately I can't get this to work. Currently, it looks like this:

<v-card elevation="2" class="ma-3 mx-auto">
    <v-card-title>
        Odds
    </v-card-title>
    <v-divider></v-divider>
    <v-card-text>
        <div id="chart3">
          <apexchart type="pie" width="550" :options="chartOptions3" :series="series3"></apexchart>
        </div>
    </v-card-text>
</v-card>

Visually, it will look like this:

enter image description here

How can I center the pie chart?

Solution

  • Apply the d-flex and justify-center utility CSS classes that set display:flex and justify-contents:center, respectively, on <v-card-text>:

    <v-card-text class="d-flex justify-center">

    demo