Merge pull request #214 from ONSvisual/212-column-chart-y-axis-label-…

…needs-text-anchor-start Standardising y-axis label position on column charts
ONSvisual · Mar 22, 2024 · d121715 · d121715
2 parents b5d133d + 01e7317
commit d121715
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 17 deletions.
diff --git a/column-chart-sm/script.js b/column-chart-sm/script.js
@@ -190,8 +190,8 @@ function drawGraphic() {
 			.append('g')
 			.attr('transform', 'translate(0,0)')
 			.append('text')
-			.attr('x', -margin.left + 10)
-			.attr('y', -5)
+			.attr('x', 5 - margin.left)
+			.attr('y', -10)
 			.attr('class', 'axis--label')
 			.text(() => chartIndex % chartEvery == 0 ? config.essential.yAxisLabel : "")
 			.attr('text-anchor', 'start');

diff --git a/column-chart-stacked-sm/script.js b/column-chart-stacked-sm/script.js
@@ -249,7 +249,7 @@ function drawGraphic() {
 			.append('g')
 			.attr('transform', 'translate(0,0)')
 			.append('text')
-			.attr('x', -margin.left + 10)
+			.attr('x', 5 - margin.left)
 			.attr('y', -10)
 			.attr('class', 'axis--label')
 			.text(() => chartIndex % chartEvery == 0 ? config.essential.yAxisLabel : "")

diff --git a/column-chart-stacked-with-line-sm/script.js b/column-chart-stacked-with-line-sm/script.js
@@ -307,7 +307,7 @@ function drawGraphic() {
 			.append('g')
 			.attr('transform', 'translate(0,0)')
 			.append('text')
-			.attr('x', -margin.left + 10)
+			.attr('x', 5 - margin.left)
 			.attr('y', -10)
 			.attr('class', 'axis--label')
 			.text(() => chartIndex % chartEvery == 0 ? config.essential.yAxisLabel : "")

diff --git a/column-chart-stacked-with-line/script.js b/column-chart-stacked-with-line/script.js
@@ -254,11 +254,11 @@ function drawGraphic() {
 		.append('g')
 		.attr('transform', 'translate(0,0)')
 		.append('text')
-		.attr('x', 0)
+		.attr('x', 5 - margin.left)
 		.attr('y', -10)
 		.attr('class', 'axis--label')
 		.text(config.essential.yAxisLabel)
-		.attr('text-anchor', 'end');
+		.attr('text-anchor', 'start');
 
 	//create link to source
 	d3.select('#source').text('Source: ' + config.essential.sourceText);

diff --git a/column-chart-stacked/script.js b/column-chart-stacked/script.js
@@ -191,11 +191,11 @@ function drawGraphic() {
 		.append('g')
 		.attr('transform', 'translate(0,0)')
 		.append('text')
-		.attr('x', 0)
+		.attr('x', 5 - margin.left)
 		.attr('y', -10)
 		.attr('class', 'axis--label')
 		.text(config.essential.yAxisLabel)
-		.attr('text-anchor', 'end');
+		.attr('text-anchor', 'start');
 
 	//create link to source
 	d3.select('#source').text('Source: ' + config.essential.sourceText);

diff --git a/column-chart-with-ci-sm/script.js b/column-chart-with-ci-sm/script.js
@@ -259,8 +259,8 @@ function drawGraphic() {
       .append('g')
       .attr('transform', 'translate(0,0)')
       .append('text')
-      .attr('x', -(margin.left - 5))
-      .attr('y', -10)
+			.attr('x', 5 - margin.left)
+			.attr('y', -10)
       .attr('class', 'axis--label')
       .text(() => chartPosition == 0 ? config.essential.yAxisLabel : "")
       .attr('text-anchor', 'start');

diff --git a/column-chart/config.js b/column-chart/config.js
@@ -19,26 +19,26 @@ config = {
 	"optional": {
 		"margin": {
 			"sm": {
-				"top": 15,
+				"top": 25,
 				"right": 20,
 				"bottom": 50,
 				"left": 70
 			},
 			"md": {
-				"top": 15,
+				"top": 25,
 				"right": 20,
 				"bottom": 50,
 				"left": 70
 			},
 			"lg": {
-				"top": 15,
+				"top": 25,
 				"right": 20,
 				"bottom": 50,
 				"left": 70
 			}
 		},
 		"aspectRatio": {
-			"sm": [1, 2],
+			"sm": [1, 1],
 			"md": [1, 1],
 			"lg": [2, 1]
 		},

diff --git a/column-chart/script.js b/column-chart/script.js
@@ -139,11 +139,11 @@ function drawGraphic() {
 		.append('g')
 		.attr('transform', 'translate(0,0)')
 		.append('text')
-		.attr('x', 0)
-		.attr('y', 0)
+		.attr('x', 5 - margin.left)
+		.attr('y', -10)
 		.attr('class', 'axis--label')
 		.text(config.essential.yAxisLabel)
-		.attr('text-anchor', 'end');
+		.attr('text-anchor', 'start');
 
 	//create link to source
 	d3.select('#source').text('Source: ' + config.essential.sourceText);