Leader line elbows

line-chart-dropdown-options/config.js

@@ -2,6 +2,35 @@ config = {
 	"graphicDataURL": "data.csv",
 	"colourPalette": ONSlinePalette,
 	"drawLegend": false,
+	// Direct labels (used when drawLegend=false and size != 'sm')
+	// These options are passed into lib/helpers.js:createDirectLabels().
+	"directLabels": {
+		// Horizontal gap (px) from the series endpoint to the label anchor
+		"gap": 10,
+		// Horizontal gap (px) for labels that need leader lines (i.e. labels that are in a collision cluster
+		// or get vertically displaced)
+		"gapWithLeaderLines": 16,
+		// Minimum vertical spacing (px) between adjacent labels before they are offset
+		"minSpacing": 15,
+		// Where labels should sit:
+		// - 'margin' (labels in margin, no leader lines for early-ending series)
+		// - 'marginLeader' (labels in margin, with long leader lines for early-ending series)
+		// - 'lastPoint' (labels at last data point of early ending series)
+		"labelLocation": "lastPoint",
+		// Leader lines appear only when a label is vertically displaced
+		"useLeaderLines": true,
+		// 'dashed' or 'solid'
+		"leaderLineStyle": "dashed",
+		// 'series' (match series colour) or 'mono' (single colour)
+		"leaderLineColourMode": "series",
+		// Used when leaderLineColourMode is 'mono'
+		"leaderLineMonoColour": "#707070",
+		// Geometry tuning (px)
+		"leaderLineElbowOffset": 10,
+		"leaderLineEndGap": 2,
+		// Minimum pixels from chart edge for labels
+		"minLabelOffset": 5
+	},
 	"sourceText": "Office for National Statistics",
 	"accessibleSummary": "The chart canvas is hidden from screen readers. The main message is summarised by the chart title and the data behind the chart is available to download below.",
 	"lineCurveType": "curveLinear", // Set the default line curve type

line-chart-dropdown-options/script.js

@@ -268,7 +268,7 @@ function drawGraphic() {
         .style('opacity', 0)
         .remove();
 
-    svg.selectAll('line.label-leader-line')
+	svg.selectAll('.label-leader-line')
         .transition()
         .duration(300)
         .style('opacity', 0)
@@ -300,6 +300,7 @@ function drawGraphic() {
 					return d[0];
 				});
 		} else {
+			const directLabels = config.directLabels || {};
 			createDirectLabels({
 				categories: categories,
 				data: filteredData,
@@ -310,11 +311,17 @@ function drawGraphic() {
 				chartHeight: height,
 				config: config,
 				options: {
-					labelStrategy: 'lastValid',
-					minSpacing: 15,
-					useLeaderLines: true,
-					leaderLineStyle: 'dashed',
-					minLabelOffset: 5
+					labelLocation: directLabels.labelLocation ?? 'lastPoint',
+					minSpacing: directLabels.minSpacing ?? 15,
+					minLabelOffset: directLabels.minLabelOffset ?? 5,
+					labelGap: directLabels.gap ?? 10,
+					labelGapWithLeaderLines: directLabels.gapWithLeaderLines ?? (directLabels.gap ?? 10),
+					useLeaderLines: directLabels.useLeaderLines ?? true,
+					leaderLineStyle: directLabels.leaderLineStyle ?? 'dashed',
+					leaderLineColourMode: directLabels.leaderLineColourMode ?? 'series',
+					leaderLineMonoColour: directLabels.leaderLineMonoColour ?? '#707070',
+					leaderLineElbowOffset: directLabels.leaderLineElbowOffset ?? 10,
+					leaderLineEndGap: directLabels.leaderLineEndGap ?? 2
 				}
 			});
 		}

line-chart-with-ci-area/config.js

@@ -2,6 +2,36 @@ config = {
 	"graphicDataURL": "datanumeric.csv",
 	"colourPalette": ONSlinePalette,
 	"drawLegend": false,
+	// Direct labels (used when drawLegend=false and size != 'sm')
+	// These options are passed into lib/helpers.js:createDirectLabels().
+	"directLabels": {
+		// Horizontal gap (px) from the series endpoint to the label anchor
+		"gap": 10,
+		// Horizontal gap (px) for labels that need leader lines (i.e. labels that are in a collision cluster
+		// or get vertically displaced)
+		"gapWithLeaderLines": 16,
+		// Minimum vertical spacing (px) between adjacent labels before they are offset
+		// Note: this chart previously used 0 to allow tight packing.
+		"minSpacing": 0,
+		// Where labels should sit:
+		// - 'margin' (labels in margin, no leader lines for early-ending series)
+		// - 'marginLeader' (labels in margin, with long leader lines for early-ending series)
+		// - 'lastPoint' (labels at last data point of early ending series)
+		"labelLocation": "lastPoint",
+		// Leader lines appear only when a label is vertically displaced
+		"useLeaderLines": true,
+		// 'dashed' or 'solid'
+		"leaderLineStyle": "dashed",
+		// 'series' (match series colour) or 'mono' (single colour)
+		"leaderLineColourMode": "series",
+		// Used when leaderLineColourMode is 'mono'
+		"leaderLineMonoColour": "#707070",
+		// Geometry tuning (px)
+		"leaderLineElbowOffset": 10,
+		"leaderLineEndGap": 2,
+		// Minimum pixels from chart edge for labels
+		"minLabelOffset": 5
+	},
 	"sourceText": "Office for National Statistics",
 	"accessibleSummary": "The chart canvas is hidden from screen readers. The main message is summarised by the chart title and the data behind the chart is available to download below.",
 	"lineCurveType": "curveLinear", // Set the default line curve type

line-chart-with-ci-area/script.js

@@ -197,6 +197,7 @@ function drawGraphic() {
 	});
 
 	if (!config.drawLegend && size !== 'sm') {
+		const directLabels = config.directLabels || {};
 		createDirectLabels({
 			categories: categories,
 			data: graphicData,
@@ -207,11 +208,17 @@ function drawGraphic() {
 			chartHeight: height,
 			config: config,
 			options: {
-				minSpacing: 0,
-				useLeaderLines: true,
-				leaderLineStyle: 'dashed',
-				labelStrategy: 'lastValid',
-				minLabelOffset: 5
+				labelLocation: directLabels.labelLocation ?? 'lastPoint',
+				minSpacing: directLabels.minSpacing ?? 0,
+				minLabelOffset: directLabels.minLabelOffset ?? 5,
+				labelGap: directLabels.gap ?? 10,
+				labelGapWithLeaderLines: directLabels.gapWithLeaderLines ?? (directLabels.gap ?? 10),
+				useLeaderLines: directLabels.useLeaderLines ?? true,
+				leaderLineStyle: directLabels.leaderLineStyle ?? 'dashed',
+				leaderLineColourMode: directLabels.leaderLineColourMode ?? 'series',
+				leaderLineMonoColour: directLabels.leaderLineMonoColour ?? '#707070',
+				leaderLineElbowOffset: directLabels.leaderLineElbowOffset ?? 10,
+				leaderLineEndGap: directLabels.leaderLineEndGap ?? 2
 			}
 		});
 	}

line-chart/config.js

@@ -2,6 +2,36 @@ config = {
 	"graphicDataURL": "data.csv",
 	"colourPalette": ONSlinePalette,
 	"drawLegend": false,
+	// Direct labels (used when drawLegend=false and size != 'sm')
+	// These options are passed into lib/helpers.js:createDirectLabels().
+	"directLabels": {
+		// Horizontal gap (px) from the series endpoint to the label anchor
+		"gap": 10,
+		// Horizontal gap (px) for labels that need leader lines (i.e. labels that are in a collision cluster
+		// or get vertically displaced). Note: for 'marginLeader' early-ending series, this is ONLY applied
+		// if the label is also displaced/clustered.
+		"gapWithLeaderLines": 23,
+		// Minimum vertical spacing (px) between adjacent labels before they are offset
+		"minSpacing": 12,
+		// Where labels should sit:
+		// - 'margin' (labels in margin, no leader lines for early-ending series)
+		// - 'marginLeader' (labels in margin, with long leader lines for early-ending series)
+		// - 'lastPoint' (labels at last data point of early ending series)
+		"labelLocation": "marginLeader",
+		// Leader lines appear only when a label is vertically displaced
+		"useLeaderLines": true,
+		// 'dashed' or 'solid'
+		"leaderLineStyle": "dashed",
+		// 'series' (match series colour) or 'mono' (single colour)
+		"leaderLineColourMode": "series",
+		// Used when leaderLineColourMode is 'mono'
+		"leaderLineMonoColour": "#707070",
+		// Geometry tuning (px)
+		"leaderLineElbowOffset": 10,
+		"leaderLineEndGap": 2,
+		// Minimum pixels from chart edge for labels (currently used by some charts)
+		"minLabelOffset": 10
+	},
 	"sourceText": "Office for National Statistics",
 	"accessibleSummary": "The chart canvas is hidden from screen readers. The main message is summarised by the chart title and the data behind the chart is available to download below.",
 	"lineCurveType": "curveLinear", // Set the default line curve type
@@ -31,7 +61,7 @@ config = {
 	"aspectRatio": {
 		"sm": [1, 1],
 		"md": [1, 1],
-		"lg": [1, 1]
+		"lg": [1.5, 1]
 	},
 	"margin": {
 		"sm": {

line-chart/data.csv

@@ -10,4 +10,4 @@ date,category one,category two,category three,category four two lines,category f
 09/03/2028,29000,19000,11000,1000,11000
 10/03/2029,15000,21000,10000,6000,9000
 11/03/2030,12000,24000,7000,19000,21000
-12/03/2031,4000,28000,13000,18000,23000
+12/03/2031,8300,,7500,18000,6500

line-chart/script.js

@@ -150,6 +150,7 @@ function drawGraphic() {
 				return d[0];
 			});
 	} else {
+		const directLabels = config.directLabels || {};
 		createDirectLabels({
 			categories: categories,
 			data: graphicData,
@@ -160,10 +161,17 @@ function drawGraphic() {
 			chartHeight: height,
 			config: config,
 			options: {
-				labelStrategy: 'lastValid',
-				minSpacing: 12,
-				useLeaderLines: true,
-				leaderLineStyle: 'dashed'
+				labelLocation: directLabels.labelLocation ?? 'lastPoint',
+				minSpacing: directLabels.minSpacing ?? 12,
+				minLabelOffset: directLabels.minLabelOffset ?? 5,
+				labelGap: directLabels.gap ?? 10,
+				labelGapWithLeaderLines: directLabels.gapWithLeaderLines ?? (directLabels.gap ?? 10),
+				useLeaderLines: directLabels.useLeaderLines ?? true,
+				leaderLineStyle: directLabels.leaderLineStyle ?? 'dashed',
+				leaderLineColourMode: directLabels.leaderLineColourMode ?? 'series',
+				leaderLineMonoColour: directLabels.leaderLineMonoColour ?? '#707070',
+				leaderLineElbowOffset: directLabels.leaderLineElbowOffset ?? 10,
+				leaderLineEndGap: directLabels.leaderLineEndGap ?? 2
 			}
 		});
 	}