From 6914aa4ac287f0c150ac818a717fc8967fdfc137 Mon Sep 17 00:00:00 2001
From: MikeLister <131891138+MikeLister@users.noreply.github.com>
Date: Thu, 31 Aug 2023 15:34:19 +0100
Subject: [PATCH 1/2] Update chart.css

---
 bar-chart-horizontal-with-reference-sm/chart.css | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/bar-chart-horizontal-with-reference-sm/chart.css b/bar-chart-horizontal-with-reference-sm/chart.css
index 4d043c8..c066811 100644
--- a/bar-chart-horizontal-with-reference-sm/chart.css
+++ b/bar-chart-horizontal-with-reference-sm/chart.css
@@ -21,4 +21,11 @@ line.refline {
   stroke: #222;
   stroke-width: 3px;
   stroke-linecap: round;
-}
\ No newline at end of file
+}
+
+div.legend--item--here {
+  display:flex;
+  padding-right:40px;
+  padding-bottom: 12px;
+  margin-top: 12px;
+}

From 30b4e59e58b6d248a3d59ba4c84e9a6a68df3b3d Mon Sep 17 00:00:00 2001
From: MikeLister <131891138+MikeLister@users.noreply.github.com>
Date: Thu, 31 Aug 2023 15:35:58 +0100
Subject: [PATCH 2/2] Update script.js

---
 .../script.js                                 | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/bar-chart-horizontal-with-reference-sm/script.js b/bar-chart-horizontal-with-reference-sm/script.js
index ef8f46c..56ff36c 100644
--- a/bar-chart-horizontal-with-reference-sm/script.js
+++ b/bar-chart-horizontal-with-reference-sm/script.js
@@ -1,4 +1,5 @@
 var graphic = d3.select('#graphic');
+var legend = d3.select('#legend');
 var pymChild = null;
 
 function drawGraphic() {
@@ -18,7 +19,32 @@ function drawGraphic() {
 
 	// Clear out existing graphics
 	graphic.selectAll('*').remove();
-
+	legend.selectAll('*').remove();
+
+	//Set up the legend
+	legend
+		.append('div')
+		.attr('class', 'legend--item--here')
+		.append('div').attr('class', 'legend--icon--circle')
+		.style('background-color', config.essential.colour_palette)
+
+	d3.select(".legend--item--here")
+		.append('div')
+		.append('p').attr('class', 'legend--text')
+		.html("Value")
+
+	legend
+		.append('div')
+		.attr("class", "legend--item--here refline")
+		.append('div')
+		.attr('class', 'legend--icon--refline')
+		.style('background-color', "#222")
+
+	d3.select(".legend--item--here.refline")
+		.append('div')
+		.append('p').attr('class', 'legend--text')
+		.html("Reference value")
+	
 	// Nest the graphic_data by the 'series' column
 	var nested_data = d3.group(graphic_data, (d) => d.series);