Dashboard Piecharts legend position/ hide- when entries are too many (s…

…piffe#27) * position top legends on right side Signed-off-by: Mohammed Abdi <mohammed.munir.abdi@ibm.com> * remove dead code Signed-off-by: Mohammed Abdi <mohammed.munir.abdi@ibm.com> Co-authored-by: Mohammed Abdi <mohammed.munir.abdi@ibm.com>
mrsabath · Sep 15, 2021 · 26e4bd9 · 26e4bd9
1 parent c9b4221
commit 26e4bd9
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 2 deletions.
diff --git a/tornjak-frontend/package-lock.json b/tornjak-frontend/package-lock.json
diff --git a/tornjak-frontend/package.json b/tornjak-frontend/package.json
@@ -15,10 +15,12 @@
     "carbon-components": "^10.36.0",
     "carbon-components-react": "^7.30.0",
     "carbon-icons": "^7.0.7",
+    "chart.js": "^3.5.1",
     "d3": "^5.16.0",
     "dotenv": "^8.2.0",
     "node-sass": "^6.0.1",
     "react": "^16.6.3",
+    "react-chartjs-2": "^3.0.4",
     "react-dom": "^16.6.3",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",

diff --git a/tornjak-frontend/src/charts/PieChart.js b/tornjak-frontend/src/charts/PieChart.js
@@ -10,10 +10,15 @@ class PieChart1 extends React.Component {
         resizable: true,
         height: "300px",
         legend: {
-          alignment: "center"
+          position: "right",
+          truncation: {
+            "type": "mid_line",
+            "threshold": 15,
+            "numCharacter": 12
+          },
         },
         pie: {
-          alignment: "center"
+          alignment: "center",
         }
       }
     };