From 68b828b5fb3dcfa037b5f5248119dbd1c9df5c8a Mon Sep 17 00:00:00 2001
From: asal sahami <asalsahami22@gmail.com>
Date: Sat, 28 Sep 2024 19:05:55 +0200
Subject: [PATCH] graph
---
src/App/mediarules.css | 4 ++++
src/components/Graph.tsx | 11 ++++++++---
2 files changed, 12 insertions(+), 3 deletions(-)
diff --git a/src/App/mediarules.css b/src/App/mediarules.css
index 385a3e73..cd3b4c8a 100644
--- a/src/App/mediarules.css
+++ b/src/App/mediarules.css
@@ -98,6 +98,10 @@
#Cystic\ Fibrosis6 h2 {
font-size: 1.5em !important; /* Mobile size */
}
+ .pie-chart-container-small {
+ width: 200px; /* Make smaller for mobile */
+ height: 200px; /* Adjust height accordingly */
+ }
.row-if-small{
--bs-gutter-x: 1.5rem;
diff --git a/src/components/Graph.tsx b/src/components/Graph.tsx
index 76685112..a52d18ed 100644
--- a/src/components/Graph.tsx
+++ b/src/components/Graph.tsx
@@ -56,11 +56,16 @@ const PieChart: React.FC = () => {
responsive: true,
maintainAspectRatio: false,
plugins: {
- title: {
+ legend: {
display: true,
- text: '',
+ position: 'bottom' as const, // Puts labels below the chart
+ labels: {
+ boxWidth: 20, // Controls the size of the color box next to the labels
+ padding: 15, // Adds some padding between labels and the chart
+ usePointStyle: true,
},
- }
+ },
+ },
};
return (
--
GitLab