Merge pull request #121 from ONSvisual/Bar-with-reference-legend

Bar with reference legend
ONSvisual · Aug 31, 2023 · d9470a5 · d9470a5
2 parents e466336 + 30b4e59
commit d9470a5
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 2 deletions.
diff --git 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;
-}
+}
+
+div.legend--item--here {
+  display:flex;
+  padding-right:40px;
+  padding-bottom: 12px;
+  margin-top: 12px;
+}
diff --git 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);