diff --git a/src/components/accessories/charts/pie/Piechart.tsx b/src/components/accessories/charts/pie/Piechart.tsx index 38d907734..7bbf48549 100644 --- a/src/components/accessories/charts/pie/Piechart.tsx +++ b/src/components/accessories/charts/pie/Piechart.tsx @@ -9,10 +9,12 @@ export const Piechart: FC = ({ data, title, height, width }) => { const options = { responsive: true, - maintainAspectRatio: false, + maintainAspectRatio: true, plugins: { legend: { position: "bottom" as const, + maxHeight: 100, + width: "100px", }, title: { display: title !== undefined, diff --git a/src/components/accessories/charts/pie/styles.scss b/src/components/accessories/charts/pie/styles.scss index 2ef612351..8b75d4105 100644 --- a/src/components/accessories/charts/pie/styles.scss +++ b/src/components/accessories/charts/pie/styles.scss @@ -1,7 +1,14 @@ -@import "../../../../styles/variables"; -@import "../../../../../node_modules/susy/sass/susy"; - -// .pie { -// max-width: 300px; -// max-height: 300px; -// } +@import "../../../../styles/variables"; +@import "../../../../../node_modules/susy/sass/susy"; + +// .pie { +// max-width: 300px; +// max-height: 300px; +// } + +canvas { + height: 100% !important; + width: unset !important; + max-height: calc(100% - 100px) !important; + aspect-ratio: 1 !important; +} diff --git a/src/components/accessories/dashboard/card/styles.scss b/src/components/accessories/dashboard/card/styles.scss index d8b4e8957..d8086b511 100644 --- a/src/components/accessories/dashboard/card/styles.scss +++ b/src/components/accessories/dashboard/card/styles.scss @@ -13,10 +13,13 @@ flex-direction: column; max-height: 100%; - canvas.pie { - height: unset !important; - width: calc(100% - 100px) !important; - aspect-ratio: 1 !important; + .MuiCardContent-root { + display: flex; + flex-direction: column; + justify-content: end; + canvas { + justify-self: center; + } } .DashboardCard-item-header {