Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: How to make auto height/witdh for Pie chart ?

GuillaumeDgr premium asked 3 years ago


Expected behavior Pie chart to respect column width (and center inside).

Actual behavior I'm forced to put static height/width and pie chart is not properly centered inside his columns parent. If not, pie charts are too big. How to make them fit column width pls ? I did not find the solution in docs. Thanks

Resources (screenshots, code snippets etc.)

<mdb-row class="justify-content-center align-items-center">
  <mdb-col col="4">
    <p class="text-secondary"><strong>Data A</strong></p>
    <mdb-pie-chart
      class="m0 p-0"
      datalabels
      :data="dataA"
      :options="optsA"
    />
    <mdb-btn @click="goToA" outline="primary" size="sm"
      >Voir plus</mdb-btn
    >
  </mdb-col>
  <mdb-col col="4">
    <p class="text-secondary"><strong>Data B</strong></p>
    <mdb-pie-chart
      class="m0 p-0"
      datalabels
      :data="dataB"
      :options="optsB"
    />
    <mdb-btn @click="goToB" outline="primary" size="sm"
      >Voir plus</mdb-btn
    >
  </mdb-col>
  <mdb-col col="4">
    <p class="text-secondary"><strong>Data C</strong></p>
    <mdb-pie-chart
      class="m0 p-0"
      datalabels
      :data="dataC"
      :options="optsC"
    />
    <mdb-btn @click="goToC" outline="primary" size="sm"
      >Voir plus</mdb-btn
    >
  </mdb-col>
</mdb-row>

enter image description here

enter image description here


Mikołaj Smoleński staff commented 3 years ago

Did You try changing responsive key value to true?

Keep coding, Mikołaj from MDB



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: 6.7.2
  • Device: Mac book pro
  • Browser: Firefox developers
  • OS: MacOs
  • Provided sample code: No
  • Provided link: No
Tags