From 162f4711ba6b61bb9650da42d7b6bfc957359fa8 Mon Sep 17 00:00:00 2001
From: Hana Xu <115299789+hana-linode@users.noreply.github.com>
Date: Thu, 18 Jan 2024 18:02:43 -0500
Subject: [PATCH] change: [M3-7668] - Right align chart tooltip data points
 (#10078)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description 📝
Right justify the chart tooltip datapoints so that they are more discernible as suggested by Kendall/Andrew

## How to test 🧪

### Prerequisites
(How to setup test environment)
- Have a Linode that's been running for a while

### Verification steps
(How to verify changes)
- Hover over a chart (like in the Linode Details Analytics tab) to see the tooltip text. Data points should be right aligned
---
 .../pr-10078-changed-1705616003861.md          |  5 +++++
 .../src/components/AreaChart/AreaChart.tsx     | 18 ++++++++++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)
 create mode 100644 packages/manager/.changeset/pr-10078-changed-1705616003861.md

diff --git a/packages/manager/.changeset/pr-10078-changed-1705616003861.md b/packages/manager/.changeset/pr-10078-changed-1705616003861.md
new file mode 100644
index 00000000000..ff6c25695c9
--- /dev/null
+++ b/packages/manager/.changeset/pr-10078-changed-1705616003861.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Right align chart tooltip data points ([#10078](https://github.com/linode/manager/pull/10078))
diff --git a/packages/manager/src/components/AreaChart/AreaChart.tsx b/packages/manager/src/components/AreaChart/AreaChart.tsx
index 5e860b6d241..7f2db46b8fa 100644
--- a/packages/manager/src/components/AreaChart/AreaChart.tsx
+++ b/packages/manager/src/components/AreaChart/AreaChart.tsx
@@ -15,8 +15,9 @@ import {
 } from 'recharts';
 
 import { AccessibleAreaChart } from 'src/components/AreaChart/AccessibleAreaChart';
-import { MetricsDisplayRow } from 'src/components/LineGraph/MetricsDisplay';
+import { Box } from 'src/components/Box';
 import MetricsDisplay from 'src/components/LineGraph/MetricsDisplay';
+import { MetricsDisplayRow } from 'src/components/LineGraph/MetricsDisplay';
 import { Paper } from 'src/components/Paper';
 import { StyledBottomLegend } from 'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel';
 
@@ -94,9 +95,18 @@ export const AreaChart = (props: AreaChartProps) => {
         <StyledTooltipPaper>
           <Typography>{tooltipLabelFormatter(label, timezone)}</Typography>
           {payload.map((item) => (
-            <Typography fontFamily={theme.font.bold} key={item.dataKey}>
-              {item.dataKey}: {tooltipValueFormatter(item.value, unit)}
-            </Typography>
+            <Box
+              display="flex"
+              justifyContent="space-between"
+              key={item.dataKey}
+            >
+              <Typography fontFamily={theme.font.bold}>
+                {item.dataKey}
+              </Typography>
+              <Typography fontFamily={theme.font.bold} marginLeft={2}>
+                {tooltipValueFormatter(item.value, unit)}
+              </Typography>
+            </Box>
           ))}
         </StyledTooltipPaper>
       );