Repository: dhsc-govuk/FingertipsNext
Pull request #352: Feature/dhscft 544 relevant benchmark legend items
Author: login: stuc-bjss
Created: 2025-03-27T12:04:22Z | Merged: 2025-03-28T10:58:54Z

# Description

Jira ticket: [DHSCFT-544](https://bjss-enterprise.atlassian.net/browse/DHSCFT-544)

Ensure correct confidence interval values are displayed on charts and only relevant benchmark labels are shown

## Changes

- Change column headers on charts to show correct CI value
- Benchmark legend title matches inequality chart benchmark title
- Only show rag/bob at correct CI level in the benchmark legend

## Validation

### When comparison method is not supplied
<img width="659" alt="image" src="https://github.com/user-attachments/assets/e85d1acf-5ff8-4708-a35f-c105ce426c65" />


### 95%
<img width="653" alt="image" src="https://github.com/user-attachments/assets/4b5ea3fe-028e-4e19-ad0f-d8ed5d7b7529" />
<img width="643" alt="image" src="https://github.com/user-attachments/assets/78d718d2-2f3d-48f3-a819-a2a02a5185e2" />
<img width="635" alt="image" src="https://github.com/user-attachments/assets/a8fa1a17-0486-46db-a040-5951ef1ea079" />

### 99.8%
<img width="656" alt="image" src="https://github.com/user-attachments/assets/093cc4d3-4a46-4a3e-82c6-681420e1ea61" />
<img width="649" alt="image" src="https://github.com/user-attachments/assets/685a0a24-3b58-462d-ad6c-2bd6d30f0e85" />
<img width="641" alt="image" src="https://github.com/user-attachments/assets/52e81faf-9371-42d6-898c-2a9bfc478c6e" />

### 99.8% no judgement
<img width="652" alt="image" src="https://github.com/user-attachments/assets/a8159830-84d7-4548-a1eb-2d0b64b3d4bf" />
<img width="654" alt="image" src="https://github.com/user-attachments/assets/11507774-29f0-4a20-9baf-26c2561803cf" />
<img width="656" alt="image" src="https://github.com/user-attachments/assets/6db20f98-ba29-4807-9405-3afa085350a7" />

### 95% no judgement
<img width="655" alt="image" src="https://github.com/user-attachments/assets/7f606c52-1399-4c78-a637-ddb3970c2e8d" />
<img width="645" alt="image" src="https://github.com/user-attachments/assets/aa2fe772-f71c-4d0d-b5ca-e0a2b5c66567" />
<img width="655" alt="image" src="https://github.com/user-attachments/assets/4875ead5-529c-4534-8940-30590de8f809" />



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 197dd950f..bd867647a 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-inequalitiesBarChart-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-inequalitiesBarChart-component.png
index 1dfa3558d..108789cca 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-inequalitiesBarChart-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-inequalitiesBarChart-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-inequalitiesBarChartTable-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-inequalitiesBarChartTable-component.png
index 0a654e6b8..f4e61a396 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-inequalitiesBarChartTable-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-inequalitiesBarChartTable-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 e6f85d7e6..226a7e40c 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/ONLY-SUBJECT-then-select-ONE-INDICATOR-and-ALL-AREAS-IN-A-GROUP-then-check-the-charts-page-thematicMap-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-ALL-AREAS-IN-A-GROUP-then-check-the-charts-page-thematicMap-component.png
index 073bb98b3..942b6456e 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-ALL-AREAS-IN-A-GROUP-then-check-the-charts-page-thematicMap-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-ALL-AREAS-IN-A-GROUP-then-check-the-charts-page-thematicMap-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 fdb3b1cc5..4d6117356 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-inequalitiesBarChart-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-inequalitiesBarChart-component.png
index 2396b23f9..4a1e2f063 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-inequalitiesBarChart-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-inequalitiesBarChart-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-ALL-AREAS-IN-A-GROUP-then-check-the-charts-page-barChartEmbeddedTable-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-ALL-AREAS-IN-A-GROUP-then-check-the-charts-page-barChartEmbeddedTable-component.png
index 4a86eaec6..42185ba56 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-ALL-AREAS-IN-A-GROUP-then-check-the-charts-page-barChartEmbeddedTable-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-ALL-AREAS-IN-A-GROUP-then-check-the-charts-page-barChartEmbeddedTable-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-ALL-AREAS-IN-A-GROUP-then-check-the-charts-page-thematicMap-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-ALL-AREAS-IN-A-GROUP-then-check-the-charts-page-thematicMap-component.png
index 76a20f9a6..928e27a6c 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-ALL-AREAS-IN-A-GROUP-then-check-the-charts-page-thematicMap-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-ALL-AREAS-IN-A-GROUP-then-check-the-charts-page-thematicMap-component.png differ
diff --git a/frontend/fingertips-frontend/components/molecules/Inequalities/BarChart/Table/InequalitiesBarChartTableHead.tsx b/frontend/fingertips-frontend/components/molecules/Inequalities/BarChart/Table/InequalitiesBarChartTableHead.tsx
index ed712eb00..858f50460 100644
--- a/frontend/fingertips-frontend/components/molecules/Inequalities/BarChart/Table/InequalitiesBarChartTableHead.tsx
+++ b/frontend/fingertips-frontend/components/molecules/Inequalities/BarChart/Table/InequalitiesBarChartTableHead.tsx
@@ -52,18 +52,20 @@ const CellHeader: FC<CellHeaderProps> = ({ header, measurementUnit = '' }) =>
 interface InequalitiesBarChartTableHeadProps {
   areaName: string;
   measurementUnit?: string;
+  confidenceLimit?: number;
 }
 
 export const InequalitiesBarChartTableHead = ({
   areaName,
   measurementUnit = '',
+  confidenceLimit = 0,
 }: Readonly<InequalitiesBarChartTableHeadProps>) => {
   return (
     <>
       <Table.Row>
         <StyledAlignLeftHeader colSpan={4}>{areaName}</StyledAlignLeftHeader>
         <StyledAlignRightHeader colSpan={2} style={{ paddingRight: '20px' }}>
-          95% confidence limits
+          {confidenceLimit ? `${confidenceLimit}% confidence limits` : null}
         </StyledAlignRightHeader>
       </Table.Row>
       <Table.Row>
diff --git a/frontend/fingertips-frontend/components/molecules/Inequalities/BarChart/Table/index.tsx b/frontend/fingertips-frontend/components/molecules/Inequalities/BarChart/Table/index.tsx
index d3fc74930..f7ce820ad 100644
--- a/frontend/fingertips-frontend/components/molecules/Inequalities/BarChart/Table/index.tsx
+++ b/frontend/fingertips-frontend/components/molecules/Inequalities/BarChart/Table/index.tsx
@@ -17,6 +17,7 @@ import {
   BenchmarkComparisonMethod,
   IndicatorPolarity,
 } from '@/generated-sources/ft-api-client';
+import { getConfidenceLimitNumber } from '@/lib/chartHelpers/chartHelpers';
 
 export const StyledAlignLeftTableCellNoPadding = styled(
   StyledAlignLeftTableCell
@@ -56,6 +57,9 @@ export function InequalitiesBarChartTable({
           <InequalitiesBarChartTableHead
             areaName={areaName}
             measurementUnit={measurementUnit}
+            confidenceLimit={getConfidenceLimitNumber(
+              benchmarkComparisonMethod
+            )}
           />
         }
       >
diff --git a/frontend/fingertips-frontend/components/molecules/Inequalities/BarChart/Table/inequalitiesBarChartTable.test.tsx b/frontend/fingertips-frontend/components/molecules/Inequalities/BarChart/Table/inequalitiesBarChartTable.test.tsx
index 965ad8980..3f93c2c8c 100644
--- a/frontend/fingertips-frontend/components/molecules/Inequalities/BarChart/Table/inequalitiesBarChartTable.test.tsx
+++ b/frontend/fingertips-frontend/components/molecules/Inequalities/BarChart/Table/inequalitiesBarChartTable.test.tsx
@@ -96,6 +96,9 @@ describe('Inequalities bar chart table suite', () => {
           tableData={getTestData()}
           type={InequalitiesTypes.Sex}
           measurementUnit="kg"
+          benchmarkComparisonMethod={
+            BenchmarkComparisonMethod.CIOverlappingReferenceValue95
+          }
         />
       );
 
@@ -137,6 +140,30 @@ describe('Inequalities bar chart table suite', () => {
         expect(screen.getByText('Worse')).toBeInTheDocument();
         expect(screen.getByText('Similar')).toBeInTheDocument();
       });
+
+      it('should render 99.8% confidence', () => {
+        render(
+          <InequalitiesBarChartTable
+            tableData={getTestData()}
+            type={InequalitiesTypes.Sex}
+            benchmarkComparisonMethod={
+              BenchmarkComparisonMethod.CIOverlappingReferenceValue99_8
+            }
+          />
+        );
+        expect(screen.getByText('99.8% confidence limits')).toBeInTheDocument();
+      });
+
+      it('should not render confidence limits if missing', () => {
+        render(
+          <InequalitiesBarChartTable
+            tableData={getTestData()}
+            type={InequalitiesTypes.Sex}
+            benchmarkComparisonMethod={BenchmarkComparisonMethod.Unknown}
+          />
+        );
+        expect(screen.queryByText('confidence limits')).not.toBeInTheDocument();
+      });
     });
   });
 });
diff --git a/frontend/fingertips-frontend/components/molecules/Inequalities/BarChart/index.tsx b/frontend/fingertips-frontend/components/molecules/Inequalities/BarChart/index.tsx
index 4629e80ae..00b99970a 100644
--- a/frontend/fingertips-frontend/components/molecules/Inequalities/BarChart/index.tsx
+++ b/frontend/fingertips-frontend/components/molecules/Inequalities/BarChart/index.tsx
@@ -15,8 +15,8 @@ import { ConfidenceIntervalCheckbox } from '../../ConfidenceIntervalCheckbox';
 import { useEffect, useState } from 'react';
 import {
   generateConfidenceIntervalSeries,
-  loadHighchartsModules,
   getBenchmarkColour,
+  loadHighchartsModules,
 } from '@/lib/chartHelpers/chartHelpers';
 import {
   BenchmarkComparisonMethod,
@@ -75,6 +75,8 @@ export function InequalitiesBarChart({
     benchmarkValue,
   ]);
 
+  const comparedTo = `${barChartData.areaName} persons`;
+
   const seriesData: Highcharts.SeriesOptionsType[] = [
     {
       type: 'bar',
@@ -119,7 +121,7 @@ export function InequalitiesBarChart({
       max: yAxisMaxValue + 0.2 * yAxisMaxValue,
       plotLines: [
         {
-          ...getPlotline(`${barChartData.areaName} persons`, benchmarkValue),
+          ...getPlotline(comparedTo, benchmarkValue),
           events: {
             mouseover: function (
               this: Highcharts.PlotLineOrBand,
@@ -193,7 +195,11 @@ export function InequalitiesBarChart({
 
   return (
     <div data-testid="inequalitiesBarChart-component">
-      <BenchmarkLegend rag />
+      <BenchmarkLegend
+        title={`Compared to ${comparedTo}`}
+        benchmarkComparisonMethod={benchmarkComparisonMethod}
+        polarity={polarity}
+      />
       <ConfidenceIntervalCheckbox
         chartName="inequalitiesBarChart"
         showConfidenceIntervalsData={showConfidenceIntervalsData}
diff --git a/frontend/fingertips-frontend/components/molecules/Inequalities/BarChart/inequalitiesBarChart.test.tsx b/frontend/fingertips-frontend/components/molecules/Inequalities/BarChart/inequalitiesBarChart.test.tsx
index fc1e32a02..2969ddea9 100644
--- a/frontend/fingertips-frontend/components/molecules/Inequalities/BarChart/inequalitiesBarChart.test.tsx
+++ b/frontend/fingertips-frontend/components/molecules/Inequalities/BarChart/inequalitiesBarChart.test.tsx
@@ -1,8 +1,11 @@
 import { InequalitiesBarChart } from '.';
 import { render, screen } from '@testing-library/react';
-import { expect } from '@jest/globals';
 import { getTestData } from './mocks';
 import { InequalitiesTypes } from '@/components/organisms/Inequalities/inequalitiesHelpers';
+import {
+  BenchmarkComparisonMethod,
+  IndicatorPolarity,
+} from '@/generated-sources/ft-api-client';
 
 describe('Inequalities LineChart suite', () => {
   it('should render the expected elements', async () => {
@@ -12,6 +15,11 @@ describe('Inequalities LineChart suite', () => {
         barChartData={getTestData()}
         yAxisLabel={yAxisLabel}
         type={InequalitiesTypes.Sex}
+        measurementUnit={'$'}
+        benchmarkComparisonMethod={
+          BenchmarkComparisonMethod.CIOverlappingReferenceValue95
+        }
+        polarity={IndicatorPolarity.NoJudgement}
       />
     );
 
@@ -27,5 +35,12 @@ describe('Inequalities LineChart suite', () => {
     expect(barChart).toBeInTheDocument();
     expect(barChart).toHaveTextContent(`Inequality type: Sex`);
     expect(barChart).toHaveTextContent(yAxisLabel);
+    expect(barChart).toHaveTextContent('$');
+    expect(
+      screen.getByText('Compared to South FooBar persons')
+    ).toBeInTheDocument();
+    expect(screen.getByText('Lower')).toBeInTheDocument();
+    expect(screen.getByText('Higher')).toBeInTheDocument();
+    expect(screen.getByText('Similar')).toBeInTheDocument();
   });
 });
diff --git a/frontend/fingertips-frontend/components/organisms/BarChartEmbeddedTable/index.tsx b/frontend/fingertips-frontend/components/organisms/BarChartEmbeddedTable/index.tsx
index aff29b519..9207a4cd9 100644
--- a/frontend/fingertips-frontend/components/organisms/BarChartEmbeddedTable/index.tsx
+++ b/frontend/fingertips-frontend/components/organisms/BarChartEmbeddedTable/index.tsx
@@ -7,6 +7,7 @@ import {
 } from '@/generated-sources/ft-api-client';
 import { Table } from 'govuk-react';
 import {
+  getConfidenceLimitNumber,
   getMostRecentData,
   sortHealthDataByYearDescending,
   sortHealthDataPointsByDescendingYear,
@@ -26,7 +27,6 @@ export enum BarChartEmbeddedTableHeadingEnum {
   Value = 'Value',
   Lower = 'Lower',
   Upper = 'Upper',
-  ConfidenceLimit = '95% confidence limits',
 }
 
 interface BarChartEmbeddedTableProps {
@@ -38,7 +38,7 @@ interface BarChartEmbeddedTableProps {
   polarity?: IndicatorPolarity;
 }
 
-const formatHeader = (title: BarChartEmbeddedTableHeadingEnum) => {
+const formatHeader = (title: string) => {
   return title.split(' ').map((word, index) => (
     <React.Fragment key={`${word}-${index}`}>
       {word}
@@ -102,6 +102,7 @@ export function BarChartEmbeddedTable({
   const [showConfidenceIntervalsData, setShowConfidenceIntervalsData] =
     useState(false);
 
+  const confidenceLimit = getConfidenceLimitNumber(benchmarkComparisonMethod);
   return (
     <div data-testid={'barChartEmbeddedTable-component'}>
       <ConfidenceIntervalCheckbox
@@ -115,7 +116,9 @@ export function BarChartEmbeddedTable({
             <Table.Row>
               <Table.CellHeader colSpan={6}></Table.CellHeader>
               <Table.CellHeader colSpan={2} style={{ textAlign: 'center' }}>
-                {formatHeader(BarChartEmbeddedTableHeadingEnum.ConfidenceLimit)}
+                {confidenceLimit
+                  ? formatHeader(`${confidenceLimit}% confidence limits`)
+                  : null}
               </Table.CellHeader>
             </Table.Row>
 
diff --git a/frontend/fingertips-frontend/components/organisms/BenchmarkLegend/BenchmarkLegend.test.tsx b/frontend/fingertips-frontend/components/organisms/BenchmarkLegend/BenchmarkLegend.test.tsx
index 4ad8704f3..a94af95d3 100644
--- a/frontend/fingertips-frontend/components/organisms/BenchmarkLegend/BenchmarkLegend.test.tsx
+++ b/frontend/fingertips-frontend/components/organisms/BenchmarkLegend/BenchmarkLegend.test.tsx
@@ -1,24 +1,88 @@
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { BenchmarkLegend } from '.';
 import '@testing-library/jest-dom';
+import {
+  BenchmarkComparisonMethod,
+  IndicatorPolarity,
+} from '@/generated-sources/ft-api-client';
 
 describe('Testing the benchmark component', () => {
-  it('Snapshot testing of the UI', () => {
-    const container = render(<BenchmarkLegend rag quintiles />);
+  it('Snapshot testing of the UI RAG 95', () => {
+    const container = render(
+      <BenchmarkLegend
+        benchmarkComparisonMethod={
+          BenchmarkComparisonMethod.CIOverlappingReferenceValue95
+        }
+        polarity={IndicatorPolarity.HighIsGood}
+        title={'high is good'}
+      />
+    );
     expect(container.asFragment()).toMatchSnapshot();
   });
 
-  it('Should only render RAG points', () => {
-    render(<BenchmarkLegend rag />);
-    expect(screen.getAllByText('Better')).toHaveLength(2);
-    expect(screen.queryByText('Worst')).not.toBeInTheDocument();
-    expect(screen.queryByText('Quintiles')).not.toBeInTheDocument();
+  it('Snapshot testing of the UI BOB 95', () => {
+    const container = render(
+      <BenchmarkLegend
+        benchmarkComparisonMethod={
+          BenchmarkComparisonMethod.CIOverlappingReferenceValue95
+        }
+        polarity={IndicatorPolarity.NoJudgement}
+        title={'no judgement'}
+      />
+    );
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+
+  it('Snapshot testing of the UI RAG 99.8', () => {
+    const container = render(
+      <BenchmarkLegend
+        benchmarkComparisonMethod={
+          BenchmarkComparisonMethod.CIOverlappingReferenceValue99_8
+        }
+        polarity={IndicatorPolarity.LowIsGood}
+        title={'low is good'}
+      />
+    );
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+
+  it('Snapshot testing of the UI BOB 99.8', () => {
+    const container = render(
+      <BenchmarkLegend
+        benchmarkComparisonMethod={
+          BenchmarkComparisonMethod.CIOverlappingReferenceValue99_8
+        }
+        polarity={IndicatorPolarity.NoJudgement}
+        title={'NoJudgement'}
+      />
+    );
+    expect(container.asFragment()).toMatchSnapshot();
   });
 
-  it('Should only render quintile points', () => {
-    render(<BenchmarkLegend quintiles />);
-    expect(screen.getAllByText('Worst')).toHaveLength(1);
-    expect(screen.getAllByText('Lowest')).toHaveLength(1);
-    expect(screen.queryByText('Not compared')).not.toBeInTheDocument();
+  it('Snapshot testing of the UI RAG quintiles', () => {
+    const container = render(
+      <BenchmarkLegend
+        benchmarkComparisonMethod={BenchmarkComparisonMethod.Quintiles}
+        polarity={IndicatorPolarity.LowIsGood}
+        title={'low is good'}
+      />
+    );
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+
+  it('Snapshot testing of the UI BOB quintiles', () => {
+    const container = render(
+      <BenchmarkLegend
+        benchmarkComparisonMethod={BenchmarkComparisonMethod.Quintiles}
+        polarity={IndicatorPolarity.NoJudgement}
+        title={'NoJudgement'}
+      />
+    );
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+
+  it('Snapshot testing of the legend with all items shown', () => {
+    const container = render(<BenchmarkLegend title={'All'} />);
+    expect(container.asFragment()).toMatchSnapshot();
   });
 });
diff --git a/frontend/fingertips-frontend/components/organisms/BenchmarkLegend/BenchmarkLegendGroup.tsx b/frontend/fingertips-frontend/components/organisms/BenchmarkLegend/BenchmarkLegendGroup.tsx
new file mode 100644
index 000000000..862450ff7
--- /dev/null
+++ b/frontend/fingertips-frontend/components/organisms/BenchmarkLegend/BenchmarkLegendGroup.tsx
@@ -0,0 +1,52 @@
+import { BenchmarkLabel } from '@/components/organisms/BenchmarkLabel';
+import {
+  BenchmarkComparisonMethod,
+  BenchmarkOutcome,
+  IndicatorPolarity,
+} from '@/generated-sources/ft-api-client';
+import styled from 'styled-components';
+import { FC } from 'react';
+import { getConfidenceLimitNumber } from '@/lib/chartHelpers/chartHelpers';
+
+const LegendGroup = styled('div')({
+  position: 'relative',
+  left: '-5px',
+});
+
+const StyledLegendLabel = styled('span')({
+  fontFamily: 'nta,Arial,sans-serif',
+  fontWeight: 300,
+  fontSize: '0.842em', //16px
+});
+
+interface BenchmarkLegendProps {
+  benchmarkComparisonMethod?: BenchmarkComparisonMethod;
+  outcomes: BenchmarkOutcome[];
+  polarity: IndicatorPolarity;
+}
+
+const BenchmarkLegendGroup: FC<BenchmarkLegendProps> = ({
+  outcomes,
+  benchmarkComparisonMethod = BenchmarkComparisonMethod.Unknown,
+  polarity,
+}) => {
+  const confidenceLimit = getConfidenceLimitNumber(benchmarkComparisonMethod);
+  const prefix = confidenceLimit ? `${confidenceLimit}% confidence` : null;
+  return (
+    <>
+      {prefix ? <StyledLegendLabel>{prefix}</StyledLegendLabel> : null}
+      <LegendGroup>
+        {outcomes.map((outcome) => (
+          <BenchmarkLabel
+            key={benchmarkComparisonMethod + '_' + outcome}
+            method={benchmarkComparisonMethod}
+            outcome={outcome}
+            polarity={polarity}
+          />
+        ))}
+      </LegendGroup>
+    </>
+  );
+};
+
+export default BenchmarkLegendGroup;
diff --git a/frontend/fingertips-frontend/components/organisms/BenchmarkLegend/__snapshots__/BenchmarkLegend.test.tsx.snap b/frontend/fingertips-frontend/components/organisms/BenchmarkLegend/__snapshots__/BenchmarkLegend.test.tsx.snap
index df0a4da1b..bbbb84888 100644
--- a/frontend/fingertips-frontend/components/organisms/BenchmarkLegend/__snapshots__/BenchmarkLegend.test.tsx.snap
+++ b/frontend/fingertips-frontend/components/organisms/BenchmarkLegend/__snapshots__/BenchmarkLegend.test.tsx.snap
@@ -1,6 +1,811 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Testing the benchmark component Snapshot testing of the UI 1`] = `
+exports[`Testing the benchmark component Snapshot testing of the UI BOB 95 1`] = `
+<DocumentFragment>
+  .c4 {
+  font-family: "nta",Arial,sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 1;
+  display: inline-block;
+  padding-top: 5px;
+  padding-right: 8px;
+  padding-bottom: 4px;
+  padding-left: 8px;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  -webkit-letter-spacing: 1px;
+  -moz-letter-spacing: 1px;
+  -ms-letter-spacing: 1px;
+  letter-spacing: 1px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-transform: uppercase;
+  background-color: #1d70b8;
+  color: #ffffff;
+}
+
+.c5 {
+  padding: 5px 8px 4px 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0.3125em;
+  font-weight: 300;
+  text-transform: unset;
+  background-color: #5694CA;
+}
+
+.c6 {
+  padding: 5px 8px 4px 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0.3125em;
+  font-weight: 300;
+  text-transform: unset;
+  background-color: #FFDD00;
+  color: #0B0C0C;
+}
+
+.c7 {
+  padding: 5px 8px 4px 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0.3125em;
+  font-weight: 300;
+  text-transform: unset;
+  background-color: #003078;
+  tint: SOLID;
+}
+
+.c8 {
+  padding: 5px 8px 4px 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0.3125em;
+  font-weight: 300;
+  text-transform: unset;
+  background-color: transparent;
+  color: #0B0C0C;
+  border: 1px solid #0B0C0C;
+}
+
+.c3 {
+  position: relative;
+  left: -5px;
+}
+
+.c2 {
+  font-family: nta,Arial,sans-serif;
+  font-weight: 300;
+  font-size: 0.842em;
+}
+
+.c0 {
+  margin-bottom: 2em;
+}
+
+.c1 {
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  margin: 1em 0.1em 0.1em 0.1em;
+  font-family: nta,Arial,sans-serif;
+  font-weight: 300;
+}
+
+@media print {
+  .c4 {
+    font-size: 14px;
+    line-height: 1;
+  }
+}
+
+@media only screen and (min-width:641px) {
+  .c4 {
+    font-size: 16px;
+    line-height: 1;
+  }
+}
+
+<div
+    class="c0"
+    data-testid="benchmarkLegend-component"
+  >
+    <h4
+      class="c1"
+    >
+      no judgement
+    </h4>
+    <span
+      class="c2"
+    >
+      95% confidence
+    </span>
+    <div
+      class="c3"
+    >
+      <strong
+        class="c4 c5"
+      >
+        Lower
+      </strong>
+      <strong
+        class="c4 c6"
+      >
+        Similar
+      </strong>
+      <strong
+        class="c4 c7"
+      >
+        Higher
+      </strong>
+      <strong
+        class="c4 c8"
+      >
+        Not compared
+      </strong>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Testing the benchmark component Snapshot testing of the UI BOB 99.8 1`] = `
+<DocumentFragment>
+  .c4 {
+  font-family: "nta",Arial,sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 1;
+  display: inline-block;
+  padding-top: 5px;
+  padding-right: 8px;
+  padding-bottom: 4px;
+  padding-left: 8px;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  -webkit-letter-spacing: 1px;
+  -moz-letter-spacing: 1px;
+  -ms-letter-spacing: 1px;
+  letter-spacing: 1px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-transform: uppercase;
+  background-color: #1d70b8;
+  color: #ffffff;
+}
+
+.c5 {
+  padding: 5px 8px 4px 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0.3125em;
+  font-weight: 300;
+  text-transform: unset;
+  background-color: #AFCFE5;
+  color: #0B0C0C;
+}
+
+.c6 {
+  padding: 5px 8px 4px 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0.3125em;
+  font-weight: 300;
+  text-transform: unset;
+  background-color: #FFDD00;
+  color: #0B0C0C;
+}
+
+.c7 {
+  padding: 5px 8px 4px 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0.3125em;
+  font-weight: 300;
+  text-transform: unset;
+  background-color: #1D70B8;
+  tint: SOLID;
+}
+
+.c8 {
+  padding: 5px 8px 4px 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0.3125em;
+  font-weight: 300;
+  text-transform: unset;
+  background-color: transparent;
+  color: #0B0C0C;
+  border: 1px solid #0B0C0C;
+}
+
+.c3 {
+  position: relative;
+  left: -5px;
+}
+
+.c2 {
+  font-family: nta,Arial,sans-serif;
+  font-weight: 300;
+  font-size: 0.842em;
+}
+
+.c0 {
+  margin-bottom: 2em;
+}
+
+.c1 {
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  margin: 1em 0.1em 0.1em 0.1em;
+  font-family: nta,Arial,sans-serif;
+  font-weight: 300;
+}
+
+@media print {
+  .c4 {
+    font-size: 14px;
+    line-height: 1;
+  }
+}
+
+@media only screen and (min-width:641px) {
+  .c4 {
+    font-size: 16px;
+    line-height: 1;
+  }
+}
+
+<div
+    class="c0"
+    data-testid="benchmarkLegend-component"
+  >
+    <h4
+      class="c1"
+    >
+      NoJudgement
+    </h4>
+    <span
+      class="c2"
+    >
+      99.8% confidence
+    </span>
+    <div
+      class="c3"
+    >
+      <strong
+        class="c4 c5"
+      >
+        Lower
+      </strong>
+      <strong
+        class="c4 c6"
+      >
+        Similar
+      </strong>
+      <strong
+        class="c4 c7"
+      >
+        Higher
+      </strong>
+      <strong
+        class="c4 c8"
+      >
+        Not compared
+      </strong>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Testing the benchmark component Snapshot testing of the UI BOB quintiles 1`] = `
+<DocumentFragment>
+  .c3 {
+  font-family: "nta",Arial,sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 1;
+  display: inline-block;
+  padding-top: 5px;
+  padding-right: 8px;
+  padding-bottom: 4px;
+  padding-left: 8px;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  -webkit-letter-spacing: 1px;
+  -moz-letter-spacing: 1px;
+  -ms-letter-spacing: 1px;
+  letter-spacing: 1px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-transform: uppercase;
+  background-color: #1d70b8;
+  color: #ffffff;
+}
+
+.c4 {
+  padding: 5px 8px 4px 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0.3125em;
+  font-weight: 300;
+  text-transform: unset;
+  background-color: #E4DDFF;
+  color: #0B0C0C;
+}
+
+.c5 {
+  padding: 5px 8px 4px 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0.3125em;
+  font-weight: 300;
+  text-transform: unset;
+  background-color: #CBBEF4;
+  color: #0B0C0C;
+}
+
+.c6 {
+  padding: 5px 8px 4px 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0.3125em;
+  font-weight: 300;
+  text-transform: unset;
+  background-color: #AA90EC;
+  color: #0B0C0C;
+}
+
+.c7 {
+  padding: 5px 8px 4px 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0.3125em;
+  font-weight: 300;
+  text-transform: unset;
+  background-color: #8B60E2;
+  tint: SOLID;
+}
+
+.c8 {
+  padding: 5px 8px 4px 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0.3125em;
+  font-weight: 300;
+  text-transform: unset;
+  background-color: #6B33C3;
+  tint: SOLID;
+}
+
+.c2 {
+  position: relative;
+  left: -5px;
+}
+
+.c0 {
+  margin-bottom: 2em;
+}
+
+.c1 {
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  margin: 1em 0.1em 0.1em 0.1em;
+  font-family: nta,Arial,sans-serif;
+  font-weight: 300;
+}
+
+@media print {
+  .c3 {
+    font-size: 14px;
+    line-height: 1;
+  }
+}
+
+@media only screen and (min-width:641px) {
+  .c3 {
+    font-size: 16px;
+    line-height: 1;
+  }
+}
+
+<div
+    class="c0"
+    data-testid="benchmarkLegend-component"
+  >
+    <h4
+      class="c1"
+    >
+      NoJudgement
+    </h4>
+    <div
+      class="c2"
+    >
+      <strong
+        class="c3 c4"
+      >
+        Lowest
+      </strong>
+      <strong
+        class="c3 c5"
+      >
+        Low
+      </strong>
+      <strong
+        class="c3 c6"
+      >
+        Middle
+      </strong>
+      <strong
+        class="c3 c7"
+      >
+        High
+      </strong>
+      <strong
+        class="c3 c8"
+      >
+        Highest
+      </strong>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Testing the benchmark component Snapshot testing of the UI RAG 95 1`] = `
+<DocumentFragment>
+  .c4 {
+  font-family: "nta",Arial,sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 1;
+  display: inline-block;
+  padding-top: 5px;
+  padding-right: 8px;
+  padding-bottom: 4px;
+  padding-left: 8px;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  -webkit-letter-spacing: 1px;
+  -moz-letter-spacing: 1px;
+  -ms-letter-spacing: 1px;
+  letter-spacing: 1px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-transform: uppercase;
+  background-color: #1d70b8;
+  color: #ffffff;
+}
+
+.c5 {
+  padding: 5px 8px 4px 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0.3125em;
+  font-weight: 300;
+  text-transform: unset;
+  background-color: #00703C;
+  tint: SOLID;
+}
+
+.c6 {
+  padding: 5px 8px 4px 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0.3125em;
+  font-weight: 300;
+  text-transform: unset;
+  background-color: #FFDD00;
+  color: #0B0C0C;
+}
+
+.c7 {
+  padding: 5px 8px 4px 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0.3125em;
+  font-weight: 300;
+  text-transform: unset;
+  background-color: #D4351C;
+  tint: SOLID;
+}
+
+.c8 {
+  padding: 5px 8px 4px 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0.3125em;
+  font-weight: 300;
+  text-transform: unset;
+  background-color: transparent;
+  color: #0B0C0C;
+  border: 1px solid #0B0C0C;
+}
+
+.c3 {
+  position: relative;
+  left: -5px;
+}
+
+.c2 {
+  font-family: nta,Arial,sans-serif;
+  font-weight: 300;
+  font-size: 0.842em;
+}
+
+.c0 {
+  margin-bottom: 2em;
+}
+
+.c1 {
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  margin: 1em 0.1em 0.1em 0.1em;
+  font-family: nta,Arial,sans-serif;
+  font-weight: 300;
+}
+
+@media print {
+  .c4 {
+    font-size: 14px;
+    line-height: 1;
+  }
+}
+
+@media only screen and (min-width:641px) {
+  .c4 {
+    font-size: 16px;
+    line-height: 1;
+  }
+}
+
+<div
+    class="c0"
+    data-testid="benchmarkLegend-component"
+  >
+    <h4
+      class="c1"
+    >
+      high is good
+    </h4>
+    <span
+      class="c2"
+    >
+      95% confidence
+    </span>
+    <div
+      class="c3"
+    >
+      <strong
+        class="c4 c5"
+      >
+        Better
+      </strong>
+      <strong
+        class="c4 c6"
+      >
+        Similar
+      </strong>
+      <strong
+        class="c4 c7"
+      >
+        Worse
+      </strong>
+      <strong
+        class="c4 c8"
+      >
+        Not compared
+      </strong>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Testing the benchmark component Snapshot testing of the UI RAG 99.8 1`] = `
+<DocumentFragment>
+  .c4 {
+  font-family: "nta",Arial,sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 1;
+  display: inline-block;
+  padding-top: 5px;
+  padding-right: 8px;
+  padding-bottom: 4px;
+  padding-left: 8px;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  -webkit-letter-spacing: 1px;
+  -moz-letter-spacing: 1px;
+  -ms-letter-spacing: 1px;
+  letter-spacing: 1px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-transform: uppercase;
+  background-color: #1d70b8;
+  color: #ffffff;
+}
+
+.c5 {
+  padding: 5px 8px 4px 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0.3125em;
+  font-weight: 300;
+  text-transform: unset;
+  background-color: #85994B;
+  color: #0B0C0C;
+}
+
+.c6 {
+  padding: 5px 8px 4px 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0.3125em;
+  font-weight: 300;
+  text-transform: unset;
+  background-color: #FFDD00;
+  color: #0B0C0C;
+}
+
+.c7 {
+  padding: 5px 8px 4px 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0.3125em;
+  font-weight: 300;
+  text-transform: unset;
+  background-color: #831504;
+  tint: SOLID;
+}
+
+.c8 {
+  padding: 5px 8px 4px 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0.3125em;
+  font-weight: 300;
+  text-transform: unset;
+  background-color: transparent;
+  color: #0B0C0C;
+  border: 1px solid #0B0C0C;
+}
+
+.c3 {
+  position: relative;
+  left: -5px;
+}
+
+.c2 {
+  font-family: nta,Arial,sans-serif;
+  font-weight: 300;
+  font-size: 0.842em;
+}
+
+.c0 {
+  margin-bottom: 2em;
+}
+
+.c1 {
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  margin: 1em 0.1em 0.1em 0.1em;
+  font-family: nta,Arial,sans-serif;
+  font-weight: 300;
+}
+
+@media print {
+  .c4 {
+    font-size: 14px;
+    line-height: 1;
+  }
+}
+
+@media only screen and (min-width:641px) {
+  .c4 {
+    font-size: 16px;
+    line-height: 1;
+  }
+}
+
+<div
+    class="c0"
+    data-testid="benchmarkLegend-component"
+  >
+    <h4
+      class="c1"
+    >
+      low is good
+    </h4>
+    <span
+      class="c2"
+    >
+      99.8% confidence
+    </span>
+    <div
+      class="c3"
+    >
+      <strong
+        class="c4 c5"
+      >
+        Better
+      </strong>
+      <strong
+        class="c4 c6"
+      >
+        Similar
+      </strong>
+      <strong
+        class="c4 c7"
+      >
+        Worse
+      </strong>
+      <strong
+        class="c4 c8"
+      >
+        Not compared
+      </strong>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Testing the benchmark component Snapshot testing of the UI RAG quintiles 1`] = `
 <DocumentFragment>
   .c3 {
   font-family: "nta",Arial,sans-serif;
@@ -36,11 +841,177 @@ exports[`Testing the benchmark component Snapshot testing of the UI 1`] = `
   margin: 0.3125em;
   font-weight: 300;
   text-transform: unset;
-  background-color: #00703C;
+  background-color: #D494C1;
+  color: #0B0C0C;
+}
+
+.c5 {
+  padding: 5px 8px 4px 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0.3125em;
+  font-weight: 300;
+  text-transform: unset;
+  background-color: #BC6AAA;
+  color: #0B0C0C;
+}
+
+.c6 {
+  padding: 5px 8px 4px 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0.3125em;
+  font-weight: 300;
+  text-transform: unset;
+  background-color: #A44596;
+  tint: SOLID;
+}
+
+.c7 {
+  padding: 5px 8px 4px 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0.3125em;
+  font-weight: 300;
+  text-transform: unset;
+  background-color: #812972;
   tint: SOLID;
 }
 
+.c8 {
+  padding: 5px 8px 4px 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0.3125em;
+  font-weight: 300;
+  text-transform: unset;
+  background-color: #561950;
+  tint: SOLID;
+}
+
+.c2 {
+  position: relative;
+  left: -5px;
+}
+
+.c0 {
+  margin-bottom: 2em;
+}
+
+.c1 {
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  margin: 1em 0.1em 0.1em 0.1em;
+  font-family: nta,Arial,sans-serif;
+  font-weight: 300;
+}
+
+@media print {
+  .c3 {
+    font-size: 14px;
+    line-height: 1;
+  }
+}
+
+@media only screen and (min-width:641px) {
+  .c3 {
+    font-size: 16px;
+    line-height: 1;
+  }
+}
+
+<div
+    class="c0"
+    data-testid="benchmarkLegend-component"
+  >
+    <h4
+      class="c1"
+    >
+      low is good
+    </h4>
+    <div
+      class="c2"
+    >
+      <strong
+        class="c3 c4"
+      >
+        Worst
+      </strong>
+      <strong
+        class="c3 c5"
+      >
+        Worse
+      </strong>
+      <strong
+        class="c3 c6"
+      >
+        Middle
+      </strong>
+      <strong
+        class="c3 c7"
+      >
+        Better
+      </strong>
+      <strong
+        class="c3 c8"
+      >
+        Best
+      </strong>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Testing the benchmark component Snapshot testing of the legend with all items shown 1`] = `
+<DocumentFragment>
+  .c4 {
+  font-family: "nta",Arial,sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 1;
+  display: inline-block;
+  padding-top: 5px;
+  padding-right: 8px;
+  padding-bottom: 4px;
+  padding-left: 8px;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  -webkit-letter-spacing: 1px;
+  -moz-letter-spacing: 1px;
+  -ms-letter-spacing: 1px;
+  letter-spacing: 1px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-transform: uppercase;
+  background-color: #1d70b8;
+  color: #ffffff;
+}
+
 .c5 {
+  padding: 5px 8px 4px 8px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0.3125em;
+  font-weight: 300;
+  text-transform: unset;
+  background-color: #00703C;
+  tint: SOLID;
+}
+
+.c6 {
   padding: 5px 8px 4px 8px;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -53,7 +1024,7 @@ exports[`Testing the benchmark component Snapshot testing of the UI 1`] = `
   color: #0B0C0C;
 }
 
-.c6 {
+.c7 {
   padding: 5px 8px 4px 8px;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -66,7 +1037,7 @@ exports[`Testing the benchmark component Snapshot testing of the UI 1`] = `
   tint: SOLID;
 }
 
-.c7 {
+.c8 {
   padding: 5px 8px 4px 8px;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -80,7 +1051,7 @@ exports[`Testing the benchmark component Snapshot testing of the UI 1`] = `
   border: 1px solid #0B0C0C;
 }
 
-.c8 {
+.c9 {
   padding: 5px 8px 4px 8px;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -92,7 +1063,7 @@ exports[`Testing the benchmark component Snapshot testing of the UI 1`] = `
   background-color: #5694CA;
 }
 
-.c9 {
+.c10 {
   padding: 5px 8px 4px 8px;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -287,21 +1258,22 @@ exports[`Testing the benchmark component Snapshot testing of the UI 1`] = `
   tint: SOLID;
 }
 
+.c3 {
+  position: relative;
+  left: -5px;
+}
+
+.c2 {
+  font-family: nta,Arial,sans-serif;
+  font-weight: 300;
+  font-size: 0.842em;
+}
+
 .c0 {
   margin-bottom: 2em;
 }
 
 .c1 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-}
-
-.c2 {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
@@ -310,20 +1282,15 @@ exports[`Testing the benchmark component Snapshot testing of the UI 1`] = `
   font-weight: 300;
 }
 
-.c10 {
-  font-family: nta,Arial,sans-serif;
-  font-weight: 300;
-}
-
 @media print {
-  .c3 {
+  .c4 {
     font-size: 14px;
     line-height: 1;
   }
 }
 
 @media only screen and (min-width:641px) {
-  .c3 {
+  .c4 {
     font-size: 16px;
     line-height: 1;
   }
@@ -333,159 +1300,151 @@ exports[`Testing the benchmark component Snapshot testing of the UI 1`] = `
     class="c0"
     data-testid="benchmarkLegend-component"
   >
-    <div
+    <h4
       class="c1"
     >
-      <h4
-        class="c2"
-      >
-        Compared to England
-      </h4>
-      <div>
-        <strong
-          class="c3 c4"
-        >
-          Better
-        </strong>
-        <strong
-          class="c3 c5"
-        >
-          Similar
-        </strong>
-        <strong
-          class="c3 c6"
-        >
-          Worse
-        </strong>
-        <strong
-          class="c3 c7"
-        >
-          Not compared
-        </strong>
-        <strong
-          class="c3 c8"
-        >
-          Lower
-        </strong>
-        <strong
-          class="c3 c9"
-        >
-          Higher
-        </strong>
-        <span
-          class="c10"
-        >
-          (95% confidence)
-        </span>
-      </div>
-    </div>
+      All
+    </h4>
+    <span
+      class="c2"
+    >
+      95% confidence
+    </span>
     <div
-      class="c1"
+      class="c3"
     >
-      <div>
-        <strong
-          class="c3 c11"
-        >
-          Better
-        </strong>
-        <strong
-          class="c3 c5"
-        >
-          Similar
-        </strong>
-        <strong
-          class="c3 c12"
-        >
-          Worse
-        </strong>
-        <strong
-          class="c3 c7"
-        >
-          Not compared
-        </strong>
-        <strong
-          class="c3 c13"
-        >
-          Lower
-        </strong>
-        <strong
-          class="c3 c14"
-        >
-          Higher
-        </strong>
-        <span
-          class="c10"
-        >
-          (99.8% confidence)
-        </span>
-      </div>
+      <strong
+        class="c4 c5"
+      >
+        Better
+      </strong>
+      <strong
+        class="c4 c6"
+      >
+        Similar
+      </strong>
+      <strong
+        class="c4 c7"
+      >
+        Worse
+      </strong>
+      <strong
+        class="c4 c8"
+      >
+        Not compared
+      </strong>
+      <strong
+        class="c4 c9"
+      >
+        Lower
+      </strong>
+      <strong
+        class="c4 c10"
+      >
+        Higher
+      </strong>
     </div>
+    <span
+      class="c2"
+    >
+      99.8% confidence
+    </span>
     <div
+      class="c3"
+    >
+      <strong
+        class="c4 c11"
+      >
+        Better
+      </strong>
+      <strong
+        class="c4 c6"
+      >
+        Similar
+      </strong>
+      <strong
+        class="c4 c12"
+      >
+        Worse
+      </strong>
+      <strong
+        class="c4 c8"
+      >
+        Not compared
+      </strong>
+      <strong
+        class="c4 c13"
+      >
+        Lower
+      </strong>
+      <strong
+        class="c4 c14"
+      >
+        Higher
+      </strong>
+    </div>
+    <h4
       class="c1"
     >
-      <h4
-        class="c2"
-      >
-         Quintiles
-      </h4>
-      <div>
-        <strong
-          class="c3 c15"
-        >
-          Lowest
-        </strong>
-        <strong
-          class="c3 c16"
-        >
-          Low
-        </strong>
-        <strong
-          class="c3 c17"
-        >
-          Middle
-        </strong>
-        <strong
-          class="c3 c18"
-        >
-          High
-        </strong>
-        <strong
-          class="c3 c19"
-        >
-          Highest
-        </strong>
-      </div>
+      Quintiles
+    </h4>
+    <div
+      class="c3"
+    >
+      <strong
+        class="c4 c15"
+      >
+        Lowest
+      </strong>
+      <strong
+        class="c4 c16"
+      >
+        Low
+      </strong>
+      <strong
+        class="c4 c17"
+      >
+        Middle
+      </strong>
+      <strong
+        class="c4 c18"
+      >
+        High
+      </strong>
+      <strong
+        class="c4 c19"
+      >
+        Highest
+      </strong>
     </div>
     <div
-      class="c1"
+      class="c3"
     >
-      <div>
-        <strong
-          class="c3 c20"
-        >
-          Worst
-        </strong>
-        <strong
-          class="c3 c21"
-        >
-          Worse
-        </strong>
-        <strong
-          class="c3 c22"
-        >
-          Middle
-        </strong>
-        <strong
-          class="c3 c23"
-        >
-          Better
-        </strong>
-        <strong
-          class="c3 c24"
-        >
-          Best
-        </strong>
-      </div>
+      <strong
+        class="c4 c20"
+      >
+        Worst
+      </strong>
+      <strong
+        class="c4 c21"
+      >
+        Worse
+      </strong>
+      <strong
+        class="c4 c22"
+      >
+        Middle
+      </strong>
+      <strong
+        class="c4 c23"
+      >
+        Better
+      </strong>
+      <strong
+        class="c4 c24"
+      >
+        Best
+      </strong>
     </div>
   </div>
 </DocumentFragment>
diff --git a/frontend/fingertips-frontend/components/organisms/BenchmarkLegend/index.tsx b/frontend/fingertips-frontend/components/organisms/BenchmarkLegend/index.tsx
index e426f7ad5..8b825fc55 100644
--- a/frontend/fingertips-frontend/components/organisms/BenchmarkLegend/index.tsx
+++ b/frontend/fingertips-frontend/components/organisms/BenchmarkLegend/index.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { BenchmarkLabel } from '@/components/organisms/BenchmarkLabel';
 import styled from 'styled-components';
 import { FC } from 'react';
 import {
@@ -8,49 +7,37 @@ import {
   BenchmarkOutcome,
   IndicatorPolarity,
 } from '@/generated-sources/ft-api-client';
+import BenchmarkLegendGroup from '@/components/organisms/BenchmarkLegend/BenchmarkLegendGroup';
 
 const LegendContainer = styled.div({
   marginBottom: '2em',
 });
 
-const DefaultBenchmarkLegendGroupPanelStyle = styled('div')({
-  alignItems: 'center',
-  alignContent: 'center',
-});
-
-const DefaultBenchmarkLegendHeaderStyle = styled('h4')({
+const BenchmarkLegendHeader = styled('h4')({
   alignSelf: 'stretch',
   margin: '1em 0.1em 0.1em 0.1em',
   fontFamily: 'nta,Arial,sans-serif',
   fontWeight: 300,
 });
 
-const StyledLegendLabel = styled('span')({
-  fontFamily: 'nta,Arial,sans-serif',
-  fontWeight: 300,
-});
-
-export interface BenchmarkData {
-  key: string;
+interface BenchmarkLegendProps {
   title?: string;
-  method: BenchmarkComparisonMethod;
-  outcomes: BenchmarkOutcome[];
-  suffix?: string;
+  benchmarkComparisonMethod?: BenchmarkComparisonMethod;
   polarity?: IndicatorPolarity;
 }
 
-interface BenchmarkLegendProps {
-  rag?: boolean;
-  quintiles?: boolean;
-}
-
 const ragOutcomes = [
   BenchmarkOutcome.Better,
   BenchmarkOutcome.Similar,
   BenchmarkOutcome.Worse,
   BenchmarkOutcome.NotCompared,
 ];
-const bobOutcomes = [BenchmarkOutcome.Lower, BenchmarkOutcome.Higher];
+const bobOutcomes = [
+  BenchmarkOutcome.Lower,
+  BenchmarkOutcome.Similar,
+  BenchmarkOutcome.Higher,
+  BenchmarkOutcome.NotCompared,
+];
 const quintilesOutcomes = [
   BenchmarkOutcome.Lowest,
   BenchmarkOutcome.Low,
@@ -66,67 +53,76 @@ const quintilesOutcomesWithJudgement = [
   BenchmarkOutcome.Best,
 ];
 
+export const getOutcomes = (
+  method: BenchmarkComparisonMethod,
+  polarity: IndicatorPolarity
+): BenchmarkOutcome[] => {
+  const withJudement =
+    polarity === IndicatorPolarity.HighIsGood ||
+    polarity === IndicatorPolarity.LowIsGood;
+  if (method === BenchmarkComparisonMethod.Quintiles)
+    return withJudement ? quintilesOutcomesWithJudgement : quintilesOutcomes;
+
+  return withJudement ? ragOutcomes : bobOutcomes;
+};
+
 export const BenchmarkLegend: FC<BenchmarkLegendProps> = ({
-  rag,
-  quintiles,
+  title = 'Compared to England',
+  benchmarkComparisonMethod = BenchmarkComparisonMethod.Unknown,
+  polarity = IndicatorPolarity.Unknown,
 }) => {
-  const model: BenchmarkData[] = [];
-  if (rag) {
-    model.push({
-      key: 'rag',
-      title: 'Compared to England',
-      method: BenchmarkComparisonMethod.CIOverlappingReferenceValue95,
-      outcomes: [...ragOutcomes, ...bobOutcomes],
-      suffix: '(95% confidence)',
-    });
-    model.push({
-      key: 'rag_99',
-      method: BenchmarkComparisonMethod.CIOverlappingReferenceValue99_8,
-      outcomes: [...ragOutcomes, ...bobOutcomes],
-      suffix: '(99.8% confidence)',
-    });
-  }
+  const outcomes = getOutcomes(benchmarkComparisonMethod, polarity);
+
+  if (benchmarkComparisonMethod === BenchmarkComparisonMethod.Unknown)
+    return <BenchmarkLegendAll title={title} />;
+
+  return (
+    <LegendContainer data-testid="benchmarkLegend-component">
+      <BenchmarkLegendHeader>{title}</BenchmarkLegendHeader>
+      <BenchmarkLegendGroup
+        polarity={polarity}
+        benchmarkComparisonMethod={benchmarkComparisonMethod}
+        outcomes={outcomes}
+      />
+    </LegendContainer>
+  );
+};
 
-  if (quintiles) {
-    model.push({
-      key: 'quintiles',
-      method: BenchmarkComparisonMethod.Quintiles,
-      title: ' Quintiles',
-      outcomes: quintilesOutcomes,
-      polarity: IndicatorPolarity.NoJudgement,
-    });
-    model.push({
-      key: 'quintiles_with_judgement',
-      method: BenchmarkComparisonMethod.Quintiles,
-      outcomes: quintilesOutcomesWithJudgement,
-    });
-  }
+interface BenchmarkLegendAllProps {
+  title: string;
+}
 
+const BenchmarkLegendAll: FC<BenchmarkLegendAllProps> = ({ title }) => {
+  const allRag = [...new Set([...ragOutcomes, ...bobOutcomes])];
   return (
     <LegendContainer data-testid="benchmarkLegend-component">
-      {model?.map((item, index) => (
-        <DefaultBenchmarkLegendGroupPanelStyle key={item.key}>
-          {item.title ? (
-            <DefaultBenchmarkLegendHeaderStyle>
-              {item.title}
-            </DefaultBenchmarkLegendHeaderStyle>
-          ) : null}
-          <div>
-            {item.outcomes.map((outcome) => (
-              <BenchmarkLabel
-                key={item.method + '_' + outcome + '_' + index}
-                method={item.method}
-                outcome={outcome}
-                polarity={item.polarity}
-              />
-            ))}
+      <BenchmarkLegendHeader>{title}</BenchmarkLegendHeader>
+      <BenchmarkLegendGroup
+        polarity={IndicatorPolarity.HighIsGood}
+        benchmarkComparisonMethod={
+          BenchmarkComparisonMethod.CIOverlappingReferenceValue95
+        }
+        outcomes={allRag}
+      />
+      <BenchmarkLegendGroup
+        polarity={IndicatorPolarity.HighIsGood}
+        benchmarkComparisonMethod={
+          BenchmarkComparisonMethod.CIOverlappingReferenceValue99_8
+        }
+        outcomes={allRag}
+      />
 
-            {item.suffix ? (
-              <StyledLegendLabel>{item.suffix}</StyledLegendLabel>
-            ) : null}
-          </div>
-        </DefaultBenchmarkLegendGroupPanelStyle>
-      ))}
+      <BenchmarkLegendHeader>Quintiles</BenchmarkLegendHeader>
+      <BenchmarkLegendGroup
+        polarity={IndicatorPolarity.NoJudgement}
+        benchmarkComparisonMethod={BenchmarkComparisonMethod.Quintiles}
+        outcomes={quintilesOutcomes}
+      />
+      <BenchmarkLegendGroup
+        polarity={IndicatorPolarity.LowIsGood}
+        benchmarkComparisonMethod={BenchmarkComparisonMethod.Quintiles}
+        outcomes={quintilesOutcomesWithJudgement}
+      />
     </LegendContainer>
   );
 };
diff --git a/frontend/fingertips-frontend/components/organisms/LineChartTable/LineChartTable.test.tsx b/frontend/fingertips-frontend/components/organisms/LineChartTable/LineChartTable.test.tsx
index fe97c171a..7af1bcfb8 100644
--- a/frontend/fingertips-frontend/components/organisms/LineChartTable/LineChartTable.test.tsx
+++ b/frontend/fingertips-frontend/components/organisms/LineChartTable/LineChartTable.test.tsx
@@ -14,6 +14,7 @@ import {
 } from '@/lib/tableHelpers/mocks';
 import { GovukColours } from '@/lib/styleHelpers/colours';
 import {
+  BenchmarkComparisonMethod,
   HealthDataForArea,
   HealthDataPointTrendEnum,
 } from '@/generated-sources/ft-api-client';
@@ -77,6 +78,9 @@ describe('Line chart table suite', () => {
           healthIndicatorData={[mockHealthData[0]]}
           englandBenchmarkData={MOCK_ENGLAND_DATA}
           measurementUnit="%"
+          benchmarkComparisonMethod={
+            BenchmarkComparisonMethod.CIOverlappingReferenceValue95
+          }
         />
       );
       expect(container.asFragment()).toMatchSnapshot();
@@ -100,6 +104,9 @@ describe('Line chart table suite', () => {
           healthIndicatorData={[mockHealthData[0]]}
           englandBenchmarkData={MOCK_ENGLAND_DATA}
           measurementUnit="%"
+          benchmarkComparisonMethod={
+            BenchmarkComparisonMethod.CIOverlappingReferenceValue95
+          }
         />
       );
 
@@ -122,19 +129,22 @@ describe('Line chart table suite', () => {
       );
     });
 
-    it('should render the expected elements when England is the only area', () => {
+    it('should render the expected elements when England is the only area and 99.8%', () => {
       render(
         <LineChartTable
           healthIndicatorData={[]}
           englandBenchmarkData={MOCK_ENGLAND_DATA}
           measurementUnit="%"
+          benchmarkComparisonMethod={
+            BenchmarkComparisonMethod.CIOverlappingReferenceValue99_8
+          }
         />
       );
 
       expect(screen.getAllByRole('columnheader')[2]).toHaveTextContent(
         'England'
       );
-      expect(screen.getByText(/95% confidence limits/i)).toBeInTheDocument();
+      expect(screen.getByText(/99.8% confidence limits/i)).toBeInTheDocument();
     });
 
     it('should have grey cell color for benchmark column', () => {
@@ -225,6 +235,9 @@ describe('Line chart table suite', () => {
           healthIndicatorData={mockHealthData}
           englandBenchmarkData={MOCK_ENGLAND_DATA}
           measurementUnit="%"
+          benchmarkComparisonMethod={
+            BenchmarkComparisonMethod.CIOverlappingReferenceValue95
+          }
         />
       );
       expect(container.asFragment()).toMatchSnapshot();
@@ -236,6 +249,9 @@ describe('Line chart table suite', () => {
           healthIndicatorData={mockHealthData}
           englandBenchmarkData={MOCK_ENGLAND_DATA}
           measurementUnit="%"
+          benchmarkComparisonMethod={
+            BenchmarkComparisonMethod.CIOverlappingReferenceValue95
+          }
         />
       );
 
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 e9c68be83..da2f46b66 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
@@ -195,6 +195,9 @@ exports[`Line chart table suite 1 Indicator, 1 Area snapshot test - should match
   margin: 0.3125em;
   font-weight: 300;
   text-transform: unset;
+  background-color: transparent;
+  color: #0B0C0C;
+  border: 1px solid #0B0C0C;
 }
 
 .c9 {
@@ -812,6 +815,9 @@ exports[`Line chart table suite 1 Indicator, 2 Areas snapshot test - should matc
   margin: 0.3125em;
   font-weight: 300;
   text-transform: unset;
+  background-color: transparent;
+  color: #0B0C0C;
+  border: 1px solid #0B0C0C;
 }
 
 .c9 {
diff --git a/frontend/fingertips-frontend/components/organisms/LineChartTable/index.tsx b/frontend/fingertips-frontend/components/organisms/LineChartTable/index.tsx
index ec2a13d88..c4d27b905 100644
--- a/frontend/fingertips-frontend/components/organisms/LineChartTable/index.tsx
+++ b/frontend/fingertips-frontend/components/organisms/LineChartTable/index.tsx
@@ -21,6 +21,7 @@ import {
 } from '@/lib/tableHelpers';
 import { BenchmarkLabel } from '@/components/organisms/BenchmarkLabel';
 import { TrendTag } from '@/components/molecules/TrendTag';
+import { getConfidenceLimitNumber } from '@/lib/chartHelpers/chartHelpers';
 
 export enum LineChartTableHeadingEnum {
   AreaPeriod = 'Period',
@@ -227,6 +228,8 @@ export function LineChartTable({
   const sortedEnglandData = sortPeriod(englandData);
   const sortedGroupData = sortPeriod(groupData);
 
+  const confidenceLimit = getConfidenceLimitNumber(benchmarkComparisonMethod);
+
   return (
     <StyledDiv data-testid="lineChartTable-component">
       <Table
@@ -276,7 +279,9 @@ export function LineChartTable({
                     colSpan={getConfidenceLimitCellSpan(index)}
                   ></Table.CellHeader>
                   <StyledConfidenceLimitsHeader colSpan={2}>
-                    95% confidence limits
+                    {confidenceLimit
+                      ? `${confidenceLimit}% confidence limits`
+                      : null}
                   </StyledConfidenceLimitsHeader>
                 </React.Fragment>
               ))}
diff --git a/frontend/fingertips-frontend/components/organisms/ThematicMap/index.tsx b/frontend/fingertips-frontend/components/organisms/ThematicMap/index.tsx
index 52826bf18..9cc892c47 100644
--- a/frontend/fingertips-frontend/components/organisms/ThematicMap/index.tsx
+++ b/frontend/fingertips-frontend/components/organisms/ThematicMap/index.tsx
@@ -24,6 +24,7 @@ interface ThematicMapProps {
 const loadHighchartsModules = async (callback: () => void) => {
   import('highcharts/modules/map').then(callback);
 };
+
 export function ThematicMap({
   healthIndicatorData,
   mapGeographyData,
@@ -60,7 +61,10 @@ export function ThematicMap({
 
   return (
     <div data-testid="thematicMap-component">
-      <BenchmarkLegend rag />
+      <BenchmarkLegend
+        benchmarkComparisonMethod={benchmarkComparisonMethod}
+        polarity={polarity}
+      />
       <HighchartsReact
         containerProps={{
           'data-testid': 'highcharts-react-thematicMap-component',
diff --git a/frontend/fingertips-frontend/lib/chartHelpers/chartHelpers.ts b/frontend/fingertips-frontend/lib/chartHelpers/chartHelpers.ts
index d9261a789..661a7b9b7 100644
--- a/frontend/fingertips-frontend/lib/chartHelpers/chartHelpers.ts
+++ b/frontend/fingertips-frontend/lib/chartHelpers/chartHelpers.ts
@@ -156,3 +156,16 @@ export function getIndicatorDataForAreasForMostRecentYearOnly(
   const mostRecentYearForAreas = getMostRecentYearForAreas(healthDataForAreas);
   return getIndicatorDataForYear(healthDataForAreas, mostRecentYearForAreas);
 }
+
+export const getConfidenceLimitNumber = (
+  benchmarkComparisonMethod: BenchmarkComparisonMethod
+): number => {
+  switch (benchmarkComparisonMethod) {
+    case BenchmarkComparisonMethod.CIOverlappingReferenceValue99_8:
+      return 99.8;
+    case BenchmarkComparisonMethod.CIOverlappingReferenceValue95:
+      return 95;
+    default:
+      return 0;
+  }
+};


Reviews:
user: login: gareth-allan
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-27T12:26:00Z
user: login: stuc-bjss
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-27T13:29:15Z
user: login: williamwillis11
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-27T14:07:17Z
user: login: williamwillis11
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-27T14:09:59Z
user: login: gareth-allan
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-27T14:11:16Z
user: login: stuc-bjss
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-27T14:21:13Z
user: login: HowardMayCGI
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-27T15:46:24Z
user: login: HowardMayCGI
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-27T16:46:07Z

Review comments:
diff_hunk: @@ -113,3 +113,16 @@ export function generateConfidenceIntervalSeries(
     lineWidth: optionalParams?.lineWidth ?? 2,
   };
 }
+
+export const getConfidenceLimitNumber = (
+  benchmarkComparisonMethod: BenchmarkComparisonMethod
+): number => {
+  switch (benchmarkComparisonMethod) {
+    case BenchmarkComparisonMethod.CIOverlappingReferenceValue99_8:
+      return 99.8;
+    case BenchmarkComparisonMethod.CIOverlappingReferenceValue95:
+      return 95;
+    default:
+      return 0;
+  }
+};
path: frontend/fingertips-frontend/lib/chartHelpers/chartHelpers.ts
user: login: gareth-allan
body: Will this work when quintiles are introduced?
created_at: 2025-03-27T12:26:00Z
author_association: CONTRIBUTOR
diff_hunk: @@ -113,3 +113,16 @@ export function generateConfidenceIntervalSeries(
     lineWidth: optionalParams?.lineWidth ?? 2,
   };
 }
+
+export const getConfidenceLimitNumber = (
+  benchmarkComparisonMethod: BenchmarkComparisonMethod
+): number => {
+  switch (benchmarkComparisonMethod) {
+    case BenchmarkComparisonMethod.CIOverlappingReferenceValue99_8:
+      return 99.8;
+    case BenchmarkComparisonMethod.CIOverlappingReferenceValue95:
+      return 95;
+    default:
+      return 0;
+  }
+};
path: frontend/fingertips-frontend/lib/chartHelpers/chartHelpers.ts
user: login: stuc-bjss
body: I tried to make the places where this is used not display anything if the return value was 0, so in a way it should work for quintiles by **not** attempting to show CI confidence in the headings - but not sure what should be displayed instead if it is quintiles 
created_at: 2025-03-27T13:29:15Z
author_association: CONTRIBUTOR
path: 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
user: login: williamwillis11
body: has this one finished rendering the line? 

think we might need https://bjss-enterprise.atlassian.net/browse/DHSCFT-510 done before this issue goes away
created_at: 2025-03-27T14:07:17Z
author_association: CONTRIBUTOR
diff_hunk: @@ -122,19 +129,22 @@ describe('Line chart table suite', () => {
       );
     });
 
-    it('should render the expected elements when England is the only area', () => {
+    it('should render the expected elements when England is the only area and 99%', () => {
path: frontend/fingertips-frontend/components/organisms/LineChartTable/LineChartTable.test.tsx
user: login: williamwillis11
body: should this be 99.8% given the assertion on line 147?
created_at: 2025-03-27T14:09:59Z
author_association: CONTRIBUTOR
diff_hunk: @@ -113,3 +113,16 @@ export function generateConfidenceIntervalSeries(
     lineWidth: optionalParams?.lineWidth ?? 2,
   };
 }
+
+export const getConfidenceLimitNumber = (
+  benchmarkComparisonMethod: BenchmarkComparisonMethod
+): number => {
+  switch (benchmarkComparisonMethod) {
+    case BenchmarkComparisonMethod.CIOverlappingReferenceValue99_8:
+      return 99.8;
+    case BenchmarkComparisonMethod.CIOverlappingReferenceValue95:
+      return 95;
+    default:
+      return 0;
+  }
+};
path: frontend/fingertips-frontend/lib/chartHelpers/chartHelpers.ts
user: login: gareth-allan
body: I think regardless on the benchmarking method (i.e. if it's quintiles), the indicator will have either 99% or 98% CIs, so unless we can tell that from the `benchmarkComparisonMethod` values for quintiles, I'm not sure this approach will work for all indicators.
created_at: 2025-03-27T14:11:15Z
author_association: CONTRIBUTOR
diff_hunk: @@ -113,3 +113,16 @@ export function generateConfidenceIntervalSeries(
     lineWidth: optionalParams?.lineWidth ?? 2,
   };
 }
+
+export const getConfidenceLimitNumber = (
+  benchmarkComparisonMethod: BenchmarkComparisonMethod
+): number => {
+  switch (benchmarkComparisonMethod) {
+    case BenchmarkComparisonMethod.CIOverlappingReferenceValue99_8:
+      return 99.8;
+    case BenchmarkComparisonMethod.CIOverlappingReferenceValue95:
+      return 95;
+    default:
+      return 0;
+  }
+};
path: frontend/fingertips-frontend/lib/chartHelpers/chartHelpers.ts
user: login: stuc-bjss
body: As far as I can tell BenchmarkComparisonMethod in the database is one of...

1. Confidence intervals overlapping reference value (95.0)
2. Confidence intervals overlapping reference value (99.8)
3. Quintiles
4. "" (empty quotes)

If quintiles has a percentage then I'm not sure where to obtain that 

<img width="642" alt="image" src="https://github.com/user-attachments/assets/ff94d7a8-4f24-48be-b3a5-17032bb8652d" />

created_at: 2025-03-27T14:19:59Z
author_association: CONTRIBUTOR
diff_hunk: @@ -113,3 +113,16 @@ export function generateConfidenceIntervalSeries(
     lineWidth: optionalParams?.lineWidth ?? 2,
   };
 }
+
+export const getConfidenceLimitNumber = (
+  benchmarkComparisonMethod: BenchmarkComparisonMethod
+): number => {
+  switch (benchmarkComparisonMethod) {
+    case BenchmarkComparisonMethod.CIOverlappingReferenceValue99_8:
+      return 99.8;
+    case BenchmarkComparisonMethod.CIOverlappingReferenceValue95:
+      return 95;
+    default:
+      return 0;
+  }
+};
path: frontend/fingertips-frontend/lib/chartHelpers/chartHelpers.ts
user: login: HowardMayCGI
body: I concur with what Stuart is saying. For an indicator which has the Benchmark method set as Quintile, our DB does not identify whether the CIs are 95 or 99.8% either in the IndicatorDim or the HealthMeasure tables.
created_at: 2025-03-27T15:46:24Z
author_association: CONTRIBUTOR

PR comments:
user: login: sonarqubecloud[bot]
created_at: 2025-03-28T10:50:13Z
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=352) **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=352&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=352&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=352&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=352&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=352&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=dhsc-govuk_FingertipsNext&pullRequest=352)


author_association: NONE