Adjusted chart aspect ratio

site/src/components/Chart.astro

@@ -29,28 +29,19 @@
 					animation: {
 						duration: 600,
 					},
+					aspectRatio: 1.2,
 					scales: {
 						y: {
 							stacked: true,
 							beginAtZero: true,
 							max: 100,
-							title: {
-								display: true,
-								text: "Percentage",
-								font: { size: 16, family: "Inter" },
-							},
 							ticks: {
 								callback: (value) => `${value}%`,
 								font: { size: 16, family: "Inter" },
 							},
 						},
 						x: {
 							stacked: true, // Enable stacking
-							title: {
-								display: true,
-								text: "Bloc",
-								font: { size: 16, family: "Inter" },
-							},
 							ticks: { font: { size: 16, family: "Inter" } },
 						},
 					},
@@ -67,12 +58,20 @@
 								size: 16,
 								family: "Inter",
 							},
+							animation: false,
+							backgroundColor: "rgba(0, 0, 0, 1)",
+							callbacks: {
+								title: function () {
+									return "";
+								},
+							},
 							bodyFont: {
 								size: 16,
 								family: "Inter",
 							},
 							usePointStyle: true,
 							boxPadding: 5,
+							padding: 10,
 						},
 					},
 					elements: { bar: { borderRadius: 2 } },
@@ -124,7 +123,7 @@
 							const baseColor = blocColors[bloc];
 							const color = darkenColor(
 								baseColor,
-								partyIndex * 30
+								partyIndex * 50
 							).concat(0.7);
 							const percentageOfTotal =
 								(Number(votes) / Number(grandTotalVotes)) * 100;

site/src/pages/index.astro

@@ -53,7 +53,7 @@ const dropdownHtml = `<label for="json-selector" class="sr-only">Select Knesset
 		<div id="geocoder" class="geocoder fixed top-4 left-4 z-10"></div>
 		<div
 			id="chart-container"
-			class="fixed bottom-16 left-0 w-full max-h-[300px] z-10 flex justify-center items-center flex-col"
+			class="fixed bottom-16 left-0 w-full max-h-[350px] z-10 flex justify-center items-center flex-col"
 		>
 			<div id="dropdown-container" class="mb-4">
 				<Fragment set:html={dropdownHtml} />