[TASK] Make Chart.js canvas responsive, add workaround for flexbox co…

…ntainer - https://www.chartjs.org/docs/latest/configuration/responsive.html#important-note - chartjs/Chart.js#11833 (comment)
in2code-de · Nov 13, 2024 · 1e7bea7 · 1e7bea7
1 parent 25e2825
commit 1e7bea7
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 2 deletions.
diff --git a/Resources/Private/Build/JavaScript/Backend/Diagram.js b/Resources/Private/Build/JavaScript/Backend/Diagram.js
@@ -83,6 +83,7 @@ const LuxDiagram = function() {
         labels: element.getAttribute('data-chart-labels').split(',')
       },
       options: {
+        maintainAspectRatio: false,
         plugins: {
           legend: {
             display: true,

diff --git a/Resources/Private/Sass/Modules.scss b/Resources/Private/Sass/Modules.scss
@@ -568,3 +568,15 @@ label {
         padding: 0 5px;
     }
 }
+
+/**
+ * Chart.js adjustments
+ *
+ */
+.lux *:has(> canvas) {
+    position: relative;
+}
+
+.lux canvas[data-chart="doughnut"] {
+    max-width: min-content;
+}