feat: legend height in order to align graphs

equinor · Apr 5, 2024 · 577061d · 577061d
1 parent e386825
commit 577061d
Showing 1 changed file with 3 additions and 2 deletions.
diff --git a/web/src/Components/Bridging/Graphs/BridgeGraph.tsx b/web/src/Components/Bridging/Graphs/BridgeGraph.tsx
@@ -34,11 +34,12 @@ export function BridgeGraph({ title, graphData, sizeFractions, bridges, showBrid
     let percentage = (index / sizeFractions.length) * 100
     return `${percentage}%`
   }
+  const legendHeight = Math.max(Math.round(Object.entries(bridges).length / 3) * 20, 30)
+
   if (!showBridge) {
     const { Bridge, ...withoutBridge } = bridges
     bridges = withoutBridge
   }
-
   return (
     <div style={{ backgroundColor: 'white', borderRadius: '0.5rem', width: '100%', height: '100%' }}>
       <Typography variant='h4' style={{ textAlign: 'center' }}>
@@ -68,7 +69,7 @@ export function BridgeGraph({ title, graphData, sizeFractions, bridges, showBrid
           />
           <YAxis type='number' allowDataOverflow width={75} label={{ value: 'Volume (%)', angle: '270' }} />
           <Tooltip />
-          <Legend verticalAlign='bottom' align='center' />
+          <Legend verticalAlign='bottom' align='center' height={legendHeight} />
           {Object.entries(bridges).map(([name, cumulative], index) => (
             <Area
               type='monotone'