Repository: dhsc-govuk/FingertipsNext
Pull request #421: DHSCFT-590 - Add Scrolling to Inequalities Line Chart Table
Author: login: gareth-allan
Created: 2025-04-08T13:55:11Z | Merged: 2025-04-09T09:02:25Z

# Description

Jira ticket: [DHSCFT-590](https://bjss-enterprise.atlassian.net/browse/DHSCFT-590)

This PR adds scrolling to the inequalities line chart table, and makes the `Period` column sticky, to match the 'standard' line chart table. There are also a few other minor styling improvements included.

## Changes

- Added horizontal scrolling to the inequalities line chart table (also made the line chart table use `auto` for scrolling, so that it doesn't show a scroll bar when not needed
- Made the `Period` column of the inequalities line chart table 'sticky' so that it isn't scrolled
- Added some padding to the inequalities line chart table columns, so the deprivation data is separated better
- Reduced the vertical space between the area name and the value unit in the inequalities line chart table header
- Removed the `Areas` text from the 'standard' line chart's legend
- Added more space between the legend and the line chart for both the 'standard' and inequalities line charts

## Validation

Inequalities line chart table (deprivation):
https://github.com/user-attachments/assets/3ede5ca9-ecb6-4a0c-add1-3465016f3073

Inequalities line chart table (sex):
![Screenshot 2025-04-08 at 15 02 29](https://github.com/user-attachments/assets/9d615ed4-4543-47b0-9aed-45a1457bf91e)

Inequalities line chart (deprivation):
<img width="645" alt="Screenshot 2025-04-08 at 15 00 49" src="https://github.com/user-attachments/assets/2d3a18f3-f078-45e5-a214-2320c151bd66" />

Inequalities line chart (sex):
![Screenshot 2025-04-08 at 15 02 35](https://github.com/user-attachments/assets/744b3105-9943-4aba-a11d-ceb7cb02559c)

'Standard' line chart table:
![Screenshot 2025-04-08 at 15 01 44](https://github.com/user-attachments/assets/bebc13df-2bd3-4f54-b1c8-0c4bb1a4ce45)

'Standard' line chart:
![Screenshot 2025-04-08 at 15 01 54](https://github.com/user-attachments/assets/1453285f-c0da-42df-9ca1-ddb07f75a54e)


Diff:
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalities-component.png b/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalities-component.png
index 169c48504..70517f1f8 100644
Binary files a/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalities-component.png and b/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalities-component.png differ
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalitiesLineChart-component.png b/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalitiesLineChart-component.png
index ca22b61dd..c3662f02c 100644
Binary files a/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalitiesLineChart-component.png and b/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalitiesLineChart-component.png differ
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalitiesLineChartTable-component.png b/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalitiesLineChartTable-component.png
index c37ec5826..85b8d4346 100644
Binary files a/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalitiesLineChartTable-component.png and b/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalitiesLineChartTable-component.png differ
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-standardLineChart-component.png b/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-standardLineChart-component.png
index 60a598d7d..799574237 100644
Binary files a/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-standardLineChart-component.png and b/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-standardLineChart-component.png differ
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-PLUS-AREAS-then-check-the-charts-page-standardLineChart-component.png b/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-PLUS-AREAS-then-check-the-charts-page-standardLineChart-component.png
index b28cf5041..43db548d6 100644
Binary files a/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-PLUS-AREAS-then-check-the-charts-page-standardLineChart-component.png and b/frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-PLUS-AREAS-then-check-the-charts-page-standardLineChart-component.png differ
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalities-component.png b/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalities-component.png
index 17aaa25a8..729a275df 100644
Binary files a/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalities-component.png and b/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalities-component.png differ
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalitiesLineChart-component.png b/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalitiesLineChart-component.png
index c0499e9e5..f25343d16 100644
Binary files a/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalitiesLineChart-component.png and b/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalitiesLineChart-component.png differ
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalitiesLineChartTable-component.png b/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalitiesLineChartTable-component.png
index bb3f82064..8ef89aff9 100644
Binary files a/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalitiesLineChartTable-component.png and b/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalitiesLineChartTable-component.png differ
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-standardLineChart-component.png b/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-standardLineChart-component.png
index 9c9535cdb..99d68b9c5 100644
Binary files a/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-standardLineChart-component.png and b/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-standardLineChart-component.png differ
diff --git a/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-PLUS-AREAS-then-check-the-charts-page-standardLineChart-component.png b/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-PLUS-AREAS-then-check-the-charts-page-standardLineChart-component.png
index 901164494..fae336be8 100644
Binary files a/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-PLUS-AREAS-then-check-the-charts-page-standardLineChart-component.png and b/frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-PLUS-AREAS-then-check-the-charts-page-standardLineChart-component.png differ
diff --git a/frontend/fingertips-frontend/components/molecules/Inequalities/LineChart/Table/__snapshots__/inequalitiesLineChartTable.test.tsx.snap b/frontend/fingertips-frontend/components/molecules/Inequalities/LineChart/Table/__snapshots__/inequalitiesLineChartTable.test.tsx.snap
index fc26134c0..9a39ce3d5 100644
--- a/frontend/fingertips-frontend/components/molecules/Inequalities/LineChart/Table/__snapshots__/inequalitiesLineChartTable.test.tsx.snap
+++ b/frontend/fingertips-frontend/components/molecules/Inequalities/LineChart/Table/__snapshots__/inequalitiesLineChartTable.test.tsx.snap
@@ -13,13 +13,13 @@ exports[`Inequalities table suite snapshot test - should match snapshot 1`] = `
   padding-right: 0;
 }
 
-.c7 {
+.c9 {
   padding: 10px 20px 10px 0;
   border-bottom: 1px solid #bfc1c3;
   text-align: left;
 }
 
-.c7:last-child {
+.c9:last-child {
   padding-right: 0;
 }
 
@@ -48,13 +48,13 @@ exports[`Inequalities table suite snapshot test - should match snapshot 1`] = `
   padding: 0.625em 0;
 }
 
-.c6 {
+.c7 {
   text-align: right;
   padding-right: 10px;
   vertical-align: top;
 }
 
-.c8 {
+.c10 {
   font-family: "nta",Arial,sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -64,40 +64,54 @@ exports[`Inequalities table suite snapshot test - should match snapshot 1`] = `
   padding-right: 0;
 }
 
-.c10 {
+.c13 {
   text-align: right;
   padding-right: 10px;
 }
 
-.c9 {
+.c11 {
   text-align: left;
   width: 10%;
 }
 
+.c12 {
+  position: -webkit-sticky;
+  position: sticky;
+  left: 0;
+  background-color: #FFFFFF;
+  z-index: 10;
+  border-right: solid black 1px;
+  padding-right: 0.5em;
+}
+
 .c5 {
   text-align: left;
   vertical-align: top;
 }
 
+.c6 {
+  position: -webkit-sticky;
+  position: sticky;
+  left: 0;
+  background-color: #FFFFFF;
+  z-index: 10;
+  border-right: solid black 1px;
+  padding-right: 0.5em;
+}
+
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  overflow-x: auto;
+  width: 100%;
 }
 
 .c4 {
   text-align: center;
 }
 
+.c8 {
+  padding-left: 10px;
+}
+
 @media print {
   .c1 {
     font-size: 14px;
@@ -139,14 +153,14 @@ exports[`Inequalities table suite snapshot test - should match snapshot 1`] = `
 }
 
 @media print {
-  .c8 {
+  .c10 {
     font-size: 14px;
     line-height: 1.2;
   }
 }
 
 @media only screen and (min-width:641px) {
-  .c8 {
+  .c10 {
     font-size: 16px;
     line-height: 1.25;
   }
@@ -172,7 +186,7 @@ exports[`Inequalities table suite snapshot test - should match snapshot 1`] = `
             South FooBar
             <span
               data-testid="inequalitiesLineChartTable-measurementUnit"
-              style="display: block; margin-top: 21px;"
+              style="display: block; margin-top: 10px;"
             >
               Value: per 100,000
             </span>
@@ -182,25 +196,25 @@ exports[`Inequalities table suite snapshot test - should match snapshot 1`] = `
           class=""
         >
           <th
-            class="c2 c3 c5"
+            class="c2 c3 c5 c6"
             data-testid="header-Period-0"
           >
             Period
           </th>
           <th
-            class="c2 c3 c6"
+            class="c2 c3 c7 c8"
             data-testid="header-Persons-1"
           >
             Persons
           </th>
           <th
-            class="c2 c3 c6"
+            class="c2 c3 c7 c8"
             data-testid="header-Male-2"
           >
             Male
           </th>
           <th
-            class="c2 c3 c6"
+            class="c2 c3 c7 c8"
             data-testid="header-Female-3"
           >
             Female
@@ -214,22 +228,22 @@ exports[`Inequalities table suite snapshot test - should match snapshot 1`] = `
           class=""
         >
           <td
-            class="c7 c8 c9"
+            class="0 c9 c10 c11 c12"
           >
             2004
           </td>
           <td
-            class="c7 c8 c10"
+            class="c9 c10 c13"
           >
             890.3
           </td>
           <td
-            class="c7 c8 c10"
+            class="c9 c10 c13"
           >
             703.4
           </td>
           <td
-            class="c7 c8 c10"
+            class="c9 c10 c13"
           >
             703.4
           </td>
@@ -238,22 +252,22 @@ exports[`Inequalities table suite snapshot test - should match snapshot 1`] = `
           class=""
         >
           <td
-            class="c7 c8 c9"
+            class="0 c9 c10 c11 c12"
           >
             2008
           </td>
           <td
-            class="c7 c8 c10"
+            class="c9 c10 c13"
           >
             135.1
           </td>
           <td
-            class="c7 c8 c10"
+            class="c9 c10 c13"
           >
             890.3
           </td>
           <td
-            class="c7 c8 c10"
+            class="c9 c10 c13"
           >
             890.3
           </td>
diff --git a/frontend/fingertips-frontend/components/molecules/Inequalities/LineChart/Table/index.tsx b/frontend/fingertips-frontend/components/molecules/Inequalities/LineChart/Table/index.tsx
index c19d4a508..0e7c5e788 100644
--- a/frontend/fingertips-frontend/components/molecules/Inequalities/LineChart/Table/index.tsx
+++ b/frontend/fingertips-frontend/components/molecules/Inequalities/LineChart/Table/index.tsx
@@ -2,11 +2,11 @@ import { Table } from 'govuk-react';
 import styled from 'styled-components';
 import {
   getDisplayValue,
-  StyledAlignLeftHeader,
-  StyledAlignLeftTableCell,
+  StyledAlignLeftStickyTableCell,
   StyledAlignRightHeader,
   StyledAlignRightTableCell,
-  StyledDiv,
+  StyledAlignStickyLeftHeader,
+  StyledDivWithScrolling,
   StyledTableCellHeader,
 } from '@/lib/tableHelpers';
 import { InequalitiesChartData } from '@/components/organisms/Inequalities/inequalitiesHelpers';
@@ -26,21 +26,25 @@ const StyledAlignCenterHeader = styled(StyledTableCellHeader)({
   textAlign: 'center',
 });
 
+const StyledAlignRightHeaderWithPadding = styled(StyledAlignRightHeader)({
+  paddingLeft: '10px',
+});
+
 const getCellHeader = (heading: string, index: number): ReactNode => {
   return heading === InequalitiesTableHeadingsEnum.PERIOD ? (
-    <StyledAlignLeftHeader
+    <StyledAlignStickyLeftHeader
       data-testid={`header-${heading}-${index}`}
       key={heading + index}
     >
       {heading}
-    </StyledAlignLeftHeader>
+    </StyledAlignStickyLeftHeader>
   ) : (
-    <StyledAlignRightHeader
+    <StyledAlignRightHeaderWithPadding
       data-testid={`header-${heading}-${index}`}
       key={heading + index}
     >
       {heading}
-    </StyledAlignRightHeader>
+    </StyledAlignRightHeaderWithPadding>
   );
 };
 
@@ -55,7 +59,7 @@ export function InequalitiesLineChartTable({
   ];
 
   return (
-    <StyledDiv data-testid="inequalitiesLineChartTable-component">
+    <StyledDivWithScrolling data-testid="inequalitiesLineChartTable-component">
       <Table
         head={
           <>
@@ -64,7 +68,7 @@ export function InequalitiesLineChartTable({
                 {tableData.areaName}
                 {measurementUnit ? (
                   <span
-                    style={{ display: 'block', marginTop: '21px' }}
+                    style={{ display: 'block', marginTop: '10px' }}
                     data-testid="inequalitiesLineChartTable-measurementUnit"
                   >
                     Value: {measurementUnit}
@@ -82,9 +86,9 @@ export function InequalitiesLineChartTable({
       >
         {tableData.rowData.map((data, index) => (
           <Table.Row key={String(data.period) + index}>
-            <StyledAlignLeftTableCell>
+            <StyledAlignLeftStickyTableCell>
               {String(data.period)}
-            </StyledAlignLeftTableCell>
+            </StyledAlignLeftStickyTableCell>
             {dynamicKeys.map((key, index) => (
               <StyledAlignRightTableCell key={key + index}>
                 {getDisplayValue(data.inequalities[key]?.value)}
@@ -93,6 +97,6 @@ export function InequalitiesLineChartTable({
           </Table.Row>
         ))}
       </Table>
-    </StyledDiv>
+    </StyledDivWithScrolling>
   );
 }
diff --git a/frontend/fingertips-frontend/components/organisms/LineChart/__snapshots__/lineChartHelpers.test.ts.snap b/frontend/fingertips-frontend/components/organisms/LineChart/__snapshots__/lineChartHelpers.test.ts.snap
index 865ed46d6..ff14738f6 100644
--- a/frontend/fingertips-frontend/components/organisms/LineChart/__snapshots__/lineChartHelpers.test.ts.snap
+++ b/frontend/fingertips-frontend/components/organisms/LineChart/__snapshots__/lineChartHelpers.test.ts.snap
@@ -20,9 +20,7 @@ exports[`generateStandardLineChartOptions should generate standard line chart op
     "itemStyle": {
       "fontSize": "16px",
     },
-    "title": {
-      "text": "Areas",
-    },
+    "margin": 20,
     "verticalAlign": "top",
   },
   "plotOptions": {
@@ -133,9 +131,7 @@ exports[`generateStandardLineChartOptions should generate standard line chart op
     "itemStyle": {
       "fontSize": "16px",
     },
-    "title": {
-      "text": "Areas",
-    },
+    "margin": 20,
     "verticalAlign": "top",
   },
   "plotOptions": {
diff --git a/frontend/fingertips-frontend/components/organisms/LineChart/lineChartHelpers.ts b/frontend/fingertips-frontend/components/organisms/LineChart/lineChartHelpers.ts
index edadcfa66..0fa5d2cbf 100644
--- a/frontend/fingertips-frontend/components/organisms/LineChart/lineChartHelpers.ts
+++ b/frontend/fingertips-frontend/components/organisms/LineChart/lineChartHelpers.ts
@@ -52,6 +52,7 @@ export const lineChartDefaultOptions: Highcharts.Options = {
     itemStyle: {
       fontSize: '16px',
     },
+    margin: 20,
   },
   accessibility: {
     enabled: false,
@@ -207,12 +208,6 @@ export function generateStandardLineChartOptions(
         style: { fontSize: AXIS_TITLE_FONT_SIZE },
       },
     },
-    legend: {
-      ...lineChartDefaultOptions.legend,
-      title: {
-        text: 'Areas',
-      },
-    },
     series: seriesData,
     tooltip: {
       formatter: function (this: Highcharts.Point): string {
diff --git a/frontend/fingertips-frontend/components/organisms/LineChartTable/__snapshots__/LineChartTable.test.tsx.snap b/frontend/fingertips-frontend/components/organisms/LineChartTable/__snapshots__/LineChartTable.test.tsx.snap
index bc165438f..7639a0ddb 100644
--- a/frontend/fingertips-frontend/components/organisms/LineChartTable/__snapshots__/LineChartTable.test.tsx.snap
+++ b/frontend/fingertips-frontend/components/organisms/LineChartTable/__snapshots__/LineChartTable.test.tsx.snap
@@ -141,6 +141,16 @@ exports[`Line chart table suite 1 Indicator, 1 Area snapshot test - should match
   vertical-align: top;
 }
 
+.c15 {
+  position: -webkit-sticky;
+  position: sticky;
+  right: 0;
+  z-index: 10;
+  border-left: solid black 1px;
+  padding-left: 0.5em;
+  padding-right: 0.5em !important;
+}
+
 .c22 {
   font-family: "nta",Arial,sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -161,16 +171,51 @@ exports[`Line chart table suite 1 Indicator, 1 Area snapshot test - should match
   border-top: solid #F3F2F1 2px;
 }
 
+.c29 {
+  position: -webkit-sticky;
+  position: sticky;
+  right: 0;
+  z-index: 10;
+  border-left: solid black 1px;
+  padding-left: 0.5em;
+  padding-right: 0.5em !important;
+}
+
 .c23 {
   text-align: left;
   width: 10%;
 }
 
+.c24 {
+  position: -webkit-sticky;
+  position: sticky;
+  left: 0;
+  background-color: #FFFFFF;
+  z-index: 10;
+  border-right: solid black 1px;
+  padding-right: 0.5em;
+}
+
 .c5 {
   text-align: left;
   vertical-align: top;
 }
 
+.c18 {
+  position: -webkit-sticky;
+  position: sticky;
+  left: 0;
+  background-color: #FFFFFF;
+  z-index: 10;
+  border-right: solid black 1px;
+  padding-right: 0.5em;
+}
+
+.c0 {
+  overflow-x: auto;
+  width: 100%;
+}
+
 .c26 {
   padding: 5px 8px 4px 8px;
   -webkit-align-items: center;
@@ -260,55 +305,10 @@ exports[`Line chart table suite 1 Indicator, 1 Area snapshot test - should match
   display: block;
 }
 
-.c24 {
-  position: -webkit-sticky;
-  position: sticky;
-  left: 0;
-  background-color: #FFFFFF;
-  z-index: 10;
-  border-right: solid black 1px;
-  padding-right: 0.5em;
-}
-
-.c18 {
-  position: -webkit-sticky;
-  position: sticky;
-  left: 0;
-  background-color: #FFFFFF;
-  z-index: 10;
-  border-right: solid black 1px;
-  padding-right: 0.5em;
-}
-
-.c29 {
-  position: -webkit-sticky;
-  position: sticky;
-  right: 0;
-  z-index: 10;
-  border-left: solid black 1px;
-  padding-left: 0.5em;
-  padding-right: 0.5em !important;
-}
-
-.c15 {
-  position: -webkit-sticky;
-  position: sticky;
-  right: 0;
-  z-index: 10;
-  border-left: solid black 1px;
-  padding-left: 0.5em;
-  padding-right: 0.5em !important;
-}
-
 .c6 {
   border: none;
 }
 
-.c0 {
-  overflow-x: scroll;
-  width: 100%;
-}
-
 @media print {
   .c11 {
     font-size: 14px;
@@ -515,7 +515,7 @@ exports[`Line chart table suite 1 Indicator, 1 Area snapshot test - should match
           class=""
         >
           <th
-            class="c3 3 c4 c5 c18"
+            class="c3 2 c4 c5 c18"
             data-testid="header-Period-0"
           >
             Period
@@ -575,7 +575,7 @@ exports[`Line chart table suite 1 Indicator, 1 Area snapshot test - should match
           class=""
         >
           <td
-            class="2 c21 c22 c23 c24"
+            class="0 c21 c22 c23 c24"
           >
             2004
           </td>
@@ -609,7 +609,7 @@ exports[`Line chart table suite 1 Indicator, 1 Area snapshot test - should match
             578.3
           </td>
           <td
-            class="4 c25 c22 c27 c28 c29"
+            class="c25 c22 c27 c28 c29"
             data-testid="grey-table-cell"
           >
             904.9
@@ -619,7 +619,7 @@ exports[`Line chart table suite 1 Indicator, 1 Area snapshot test - should match
           class=""
         >
           <td
-            class="2 c21 c22 c23 c24"
+            class="0 c21 c22 c23 c24"
           >
             2008
           </td>
@@ -653,7 +653,7 @@ exports[`Line chart table suite 1 Indicator, 1 Area snapshot test - should match
             578.3
           </td>
           <td
-            class="4 c25 c22 c27 c28 c29"
+            class="c25 c22 c27 c28 c29"
             data-testid="grey-table-cell"
           >
             966.0
@@ -806,6 +806,16 @@ exports[`Line chart table suite 1 Indicator, 2 Areas snapshot test - should matc
   vertical-align: top;
 }
 
+.c15 {
+  position: -webkit-sticky;
+  position: sticky;
+  right: 0;
+  z-index: 10;
+  border-left: solid black 1px;
+  padding-left: 0.5em;
+  padding-right: 0.5em !important;
+}
+
 .c23 {
   font-family: "nta",Arial,sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -826,16 +836,51 @@ exports[`Line chart table suite 1 Indicator, 2 Areas snapshot test - should matc
   border-top: solid #F3F2F1 2px;
 }
 
+.c31 {
+  position: -webkit-sticky;
+  position: sticky;
+  right: 0;
+  z-index: 10;
+  border-left: solid black 1px;
+  padding-left: 0.5em;
+  padding-right: 0.5em !important;
+}
+
 .c24 {
   text-align: left;
   width: 10%;
 }
 
+.c25 {
+  position: -webkit-sticky;
+  position: sticky;
+  left: 0;
+  background-color: #FFFFFF;
+  z-index: 10;
+  border-right: solid black 1px;
+  padding-right: 0.5em;
+}
+
 .c5 {
   text-align: left;
   vertical-align: top;
 }
 
+.c18 {
+  position: -webkit-sticky;
+  position: sticky;
+  left: 0;
+  background-color: #FFFFFF;
+  z-index: 10;
+  border-right: solid black 1px;
+  padding-right: 0.5em;
+}
+
+.c0 {
+  overflow-x: auto;
+  width: 100%;
+}
+
 .c27 {
   padding: 5px 8px 4px 8px;
   -webkit-align-items: center;
@@ -933,55 +978,10 @@ exports[`Line chart table suite 1 Indicator, 2 Areas snapshot test - should matc
   display: block;
 }
 
-.c25 {
-  position: -webkit-sticky;
-  position: sticky;
-  left: 0;
-  background-color: #FFFFFF;
-  z-index: 10;
-  border-right: solid black 1px;
-  padding-right: 0.5em;
-}
-
-.c18 {
-  position: -webkit-sticky;
-  position: sticky;
-  left: 0;
-  background-color: #FFFFFF;
-  z-index: 10;
-  border-right: solid black 1px;
-  padding-right: 0.5em;
-}
-
-.c31 {
-  position: -webkit-sticky;
-  position: sticky;
-  right: 0;
-  z-index: 10;
-  border-left: solid black 1px;
-  padding-left: 0.5em;
-  padding-right: 0.5em !important;
-}
-
-.c15 {
-  position: -webkit-sticky;
-  position: sticky;
-  right: 0;
-  z-index: 10;
-  border-left: solid black 1px;
-  padding-left: 0.5em;
-  padding-right: 0.5em !important;
-}
-
 .c6 {
   border: none;
 }
 
-.c0 {
-  overflow-x: scroll;
-  width: 100%;
-}
-
 @media print {
   .c11 {
     font-size: 14px;
@@ -1240,7 +1240,7 @@ exports[`Line chart table suite 1 Indicator, 2 Areas snapshot test - should matc
           class=""
         >
           <th
-            class="c3 3 c4 c5 c18"
+            class="c3 2 c4 c5 c18"
             data-testid="header-Period-0"
           >
             Period
@@ -1335,7 +1335,7 @@ exports[`Line chart table suite 1 Indicator, 2 Areas snapshot test - should matc
           class=""
         >
           <td
-            class="2 c22 c23 c24 c25"
+            class="0 c22 c23 c24 c25"
           >
             2004
           </td>
@@ -1398,7 +1398,7 @@ exports[`Line chart table suite 1 Indicator, 2 Areas snapshot test - should matc
             578.3
           </td>
           <td
-            class="4 c26 c23 c28 c30 c31"
+            class="c26 c23 c28 c30 c31"
             data-testid="grey-table-cell"
           >
             904.9
@@ -1408,7 +1408,7 @@ exports[`Line chart table suite 1 Indicator, 2 Areas snapshot test - should matc
           class=""
         >
           <td
-            class="2 c22 c23 c24 c25"
+            class="0 c22 c23 c24 c25"
           >
             2008
           </td>
@@ -1471,7 +1471,7 @@ exports[`Line chart table suite 1 Indicator, 2 Areas snapshot test - should matc
             578.3
           </td>
           <td
-            class="4 c26 c23 c28 c30 c31"
+            class="c26 c23 c28 c30 c31"
             data-testid="grey-table-cell"
           >
             966.0
diff --git a/frontend/fingertips-frontend/components/organisms/LineChartTable/index.tsx b/frontend/fingertips-frontend/components/organisms/LineChartTable/index.tsx
index 6f20816ae..ffafcdc68 100644
--- a/frontend/fingertips-frontend/components/organisms/LineChartTable/index.tsx
+++ b/frontend/fingertips-frontend/components/organisms/LineChartTable/index.tsx
@@ -12,11 +12,15 @@ import React, { FC } from 'react';
 import { GovukColours } from '@/lib/styleHelpers/colours';
 import {
   StyledAlignLeftHeader,
+  StyledAlignLeftStickyTableCell,
   StyledAlignLeftTableCell,
   StyledAlignRightHeader,
   StyledAlignRightTableCell,
+  StyledAlignStickyLeftHeader,
+  StyledDivWithScrolling,
   StyledGreyHeader,
-  StyledGreyTableCellValue,
+  StyledStickyRight,
+  StyledStickyRightHeader,
 } from '@/lib/tableHelpers';
 import { BenchmarkLabel } from '@/components/organisms/BenchmarkLabel';
 import { TrendTag } from '@/components/molecules/TrendTag';
@@ -116,40 +120,6 @@ const StyledSpan = styled('span')({
   display: 'block',
 });
 
-const stickyLeft = {
-  position: 'sticky',
-  left: 0,
-  backgroundColor: GovukColours.White,
-  zIndex: 10,
-  borderRight: 'solid black 1px',
-  paddingRight: '0.5em',
-};
-
-const stickyRight = {
-  position: 'sticky',
-  right: 0,
-  zIndex: 10,
-  borderLeft: 'solid black 1px',
-  paddingLeft: '0.5em',
-  paddingRight: '0.5em !important', // overrides the :last-child declaration which removes right padding
-};
-
-const StyledAlignLeftStickyTableCell = styled(StyledAlignLeftTableCell)(
-  stickyLeft as unknown as TemplateStringsArray
-);
-
-const StyledAlignStickyLeftHeader = styled(StyledAlignLeftHeader)(
-  stickyLeft as unknown as TemplateStringsArray
-);
-
-const StyledStickyRight = styled(StyledGreyTableCellValue)(
-  stickyRight as unknown as TemplateStringsArray
-);
-
-const StyledStickyRightHeader = styled(StyledGreyHeader)(
-  stickyRight as unknown as TemplateStringsArray
-);
-
 const sortPeriod = (
   tableRowData: LineChartTableRowData[]
 ): LineChartTableRowData[] =>
@@ -231,10 +201,6 @@ export const mapToLineChartTableData = (
 const StyledTitleCell = styled(StyledAlignLeftHeader)({
   border: 'none',
 });
-const StyledDivWithScrolling = styled('div')({
-  overflowX: 'scroll',
-  width: '100%',
-});
 
 const getConfidenceLimitCellSpan = (index: number): number =>
   index === 0 ? 4 : 3;
diff --git a/frontend/fingertips-frontend/lib/tableHelpers/index.tsx b/frontend/fingertips-frontend/lib/tableHelpers/index.tsx
index a4cbe39a8..55375a254 100644
--- a/frontend/fingertips-frontend/lib/tableHelpers/index.tsx
+++ b/frontend/fingertips-frontend/lib/tableHelpers/index.tsx
@@ -5,6 +5,24 @@ import { GovukColours } from '../styleHelpers/colours';
 import { formatNumber } from '@/lib/numberFormatter';
 import { spineChartIndicatorTitleColumnMinWidth } from '@/components/organisms/SpineChartTable/spineChartTableHelpers';
 
+const stickyLeft = {
+  position: 'sticky',
+  left: 0,
+  backgroundColor: GovukColours.White,
+  zIndex: 10,
+  borderRight: 'solid black 1px',
+  paddingRight: '0.5em',
+};
+
+const stickyRight = {
+  position: 'sticky',
+  right: 0,
+  zIndex: 10,
+  borderLeft: 'solid black 1px',
+  paddingLeft: '0.5em',
+  paddingRight: '0.5em !important', // overrides the :last-child declaration which removes right padding
+};
+
 export const StyledTableCellHeader = styled(Table.CellHeader)(
   typography.font({ size: 16 }),
   {
@@ -25,6 +43,10 @@ export const StyledGreyHeader = styled(StyledAlignRightHeader)({
   verticalAlign: 'top',
 });
 
+export const StyledStickyRightHeader = styled(StyledGreyHeader)(
+  stickyRight as unknown as TemplateStringsArray
+);
+
 export const StyledTableCell = styled(Table.Cell)(
   typography.font({ size: 16 }),
   {
@@ -42,6 +64,10 @@ export const StyledGreyTableCellValue = styled(StyledAlignRightTableCell)({
   borderTop: `solid #F3F2F1 2px`,
 });
 
+export const StyledStickyRight = styled(StyledGreyTableCellValue)(
+  stickyRight as unknown as TemplateStringsArray
+);
+
 export const StyledAlignLeftTableCell = styled(StyledTableCell)({
   textAlign: 'left',
   width: '10%',
@@ -52,17 +78,30 @@ export const StyledIndicatorTitleCell = styled(StyledAlignLeftTableCell)({
   minWidth: `${spineChartIndicatorTitleColumnMinWidth}px`,
 });
 
+export const StyledAlignLeftStickyTableCell = styled(StyledAlignLeftTableCell)(
+  stickyLeft as unknown as TemplateStringsArray
+);
+
 export const StyledAlignLeftHeader = styled(StyledTableCellHeader)({
   textAlign: 'left',
   verticalAlign: 'top',
 });
 
+export const StyledAlignStickyLeftHeader = styled(StyledAlignLeftHeader)(
+  stickyLeft as unknown as TemplateStringsArray
+);
+
 export const StyledDiv = styled('div')({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
 });
 
+export const StyledDivWithScrolling = styled('div')({
+  overflowX: 'auto',
+  width: '100%',
+});
+
 // When value is undefined, it returns an X with an aria-label for screen readers.
 export const convertToPercentage = (value?: number) => {
   return value


Reviews:
user: login: gareth-allan
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-08T14:13:57Z
user: login: williamwillis11
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-08T15:46:26Z
user: login: williamwillis11
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-08T15:46:35Z
user: login: williamwillis11
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-08T15:49:16Z
user: login: gareth-allan
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-08T16:01:23Z
user: login: gareth-allan
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-08T16:01:44Z
user: login: williamwillis11
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-09T08:38:16Z
user: login: williamwillis11
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-09T08:38:29Z
user: login: adawari-thomas-bjss
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-09T08:44:53Z
user: login: alibombaye
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-09T08:54:06Z

Review comments:
diff_hunk: @@ -207,12 +208,6 @@ export function generateStandardLineChartOptions(
         style: { fontSize: AXIS_TITLE_FONT_SIZE },
       },
     },
-    legend: {
-      ...lineChartDefaultOptions.legend,
-      title: {
-        text: 'Areas',
-      },
-    },
path: frontend/fingertips-frontend/components/organisms/LineChart/lineChartHelpers.ts
user: login: gareth-allan
body: @Nayira-BJSS: I think this is covered by your ticket.
created_at: 2025-04-08T14:13:56Z
author_association: CONTRIBUTOR
path: frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-standardLineChart-component.png
user: login: williamwillis11
body: this looks weird!
created_at: 2025-04-08T15:46:26Z
author_association: CONTRIBUTOR
path: frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-PLUS-AREAS-then-check-the-charts-page-standardLineChart-component.png
user: login: williamwillis11
body: and this
created_at: 2025-04-08T15:46:35Z
author_association: CONTRIBUTOR
path: frontend/fingertips-frontend/.test/spec/snaps/chromium/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-inequalitiesLineChart-component.png
user: login: williamwillis11
body: i dont get why this wasnt selected before hmm
created_at: 2025-04-08T15:49:16Z
author_association: CONTRIBUTOR
path: frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-standardLineChart-component.png
user: login: gareth-allan
body: In what way? The areas title has been (deliberately) removed and the chart is a bit taller as a result of having more space.
created_at: 2025-04-08T16:01:22Z
author_association: CONTRIBUTOR
path: frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-PLUS-AREAS-then-check-the-charts-page-standardLineChart-component.png
user: login: gareth-allan
body: Again, I think this is the effect of removing the `Areas` title from above the legend.
created_at: 2025-04-08T16:01:44Z
author_association: CONTRIBUTOR
path: frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/BOTH-SUBJECT-AND-AREA-then-select-ONE-INDICATOR-and-ONE-AREA-then-check-the-charts-page-standardLineChart-component.png
user: login: williamwillis11
body: it looks fine now - but before it was like a tiny box rather than the standardLineChart 
created_at: 2025-04-09T08:38:16Z
author_association: CONTRIBUTOR
path: frontend/fingertips-frontend/.test/spec/snaps/webkit/fully_integrated_e2e_tests/core_journeys.spec.ts/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-TWO-PLUS-AREAS-then-check-the-charts-page-standardLineChart-component.png
user: login: williamwillis11
body: it looks fine now - but before it was like a tiny box rather than the standardLineChart 
created_at: 2025-04-09T08:38:29Z
author_association: CONTRIBUTOR

PR comments:
user: login: sonarqubecloud[bot]
created_at: 2025-04-08T14:10:48Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=dhsc-govuk_FingertipsNext&pullRequest=421) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=dhsc-govuk_FingertipsNext&pullRequest=421&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=dhsc-govuk_FingertipsNext&pullRequest=421&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=dhsc-govuk_FingertipsNext&pullRequest=421&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=dhsc-govuk_FingertipsNext&pullRequest=421&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=dhsc-govuk_FingertipsNext&pullRequest=421&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=dhsc-govuk_FingertipsNext&pullRequest=421)


author_association: NONE