ONSdigital · broadpeter · Sep 1, 2025
diff --git a/column-chart-stacked-with-line-sm/chart.css b/column-chart-stacked-with-line-sm/chart.css
@@ -1,4 +1,4 @@
-.dataLabels{
+.dataLabels {
   font-weight: 600;
   font-size: 14px;
 }
@@ -12,17 +12,15 @@
   margin-right: 0;
 }
 
-
-
-#legend{
-  display: grid;
-  align-items: center;
-  padding-bottom: 20px;
+.diamondStyle {
+  stroke-width: 2px;
+  stroke-linejoin: round;
+  fill: white;
 }
 
 .dataLine {
   stroke-width: 3px;
   stroke-linecap: round;
   stroke-linejoin: round;
   fill: none;
-}
+}
diff --git a/column-chart-stacked-with-line-sm/config.js b/column-chart-stacked-with-line-sm/config.js
@@ -1,83 +1,86 @@
 config = {
-	"essential": {
-		"graphic_data_url": "data.csv",
-		"colour_palette": ["#206095", "#27A0CC", "#871A5B", "#A8BD3A", "#F66068"],
-		"line_colour": "#222222",
-		"sourceText": "Office for National Statistics",
-		"accessibleSummary": "Here is the screenreader text describing the chart.",
-		"xAxisTickFormat": {
-			"sm": "%Y",
-			"md": "%Y",
-			"lg": "%b-%y"
-		},
-		"xAxisNumberFormat": ".0f",
-		"yAxisTickFormat": ".0f",
-		"dateFormat": "%b-%y",
-		//the format your date data has in data.csv
-		"yDomain": "auto",
-		// either "auto" or an array for the x domain e.g. [0,100]
-		"line_series": "Category 5",
-		"yAxisLabel": "y axis label",
-		"stackOffset": "stackOffsetNone",
-		// options include
-		// stackOffsetNone means the baseline is set at zero
-		// stackOffsetExpand to do 100% charts
-		// stackOffsetDiverging for data with positive and negative values
-		"stackOrder": "stackOrderNone"
-		// other options include
-		// stackOrderNone means the order is taken from the datafile
-		// stackOrderAppearance the earliest series (according to the maximum value) is at the bottom
-		// stackOrderAscending the smallest series (according to the sum of values) is at the bottom
-		// stackOrderDescending the largest series (according to the sum of values) is at the bottom
-		// stackOrderReverse reverse the order as set from the data file
-	},
-	"optional": {
-		"margin": {
-			"sm": {
-				"top": 50,
-				"right": 20,
-				"bottom": 50,
-				"left": 70
-			},
-			"md": {
-				"top": 50,
-				"right": 20,
-				"bottom": 50,
-				"left": 70
-			},
-			"lg": {
-				"top": 50,
-				"right": 20,
-				"bottom": 50,
-				"left": 70
-			}
-		},
-		"chartGap": 10,
-		"chart_every": {
-			"sm": 1,
-			"md": 2,
-			"lg": 2
-		},
-		"aspectRatio": {
-			"sm": [1, 1],
-			"md": [1, 1],
-			"lg": [4, 3]
-		},
-		"xAxisTicksEvery": { // this is the interval of ticks on the x axis - always including the first and last date
-			"sm": 4,
-			"md": 4,
-			"lg": 3
-		},
-		"yAxisTicks": {
-			"sm": 10,
-			"md": 8,
-			"lg": 4
-		},
-		"legendColumns": 4,
-		"mobileBreakpoint": 510,
-		"mediumBreakpoint": 600,
-		"dropYAxis": true
-	},
-	"elements": { "select": 0, "nav": 0, "legend": 0, "titles": 0 },
-	"chart_build": {}
+  essential: {
+    graphic_data_url: "data.csv",
+    showMarkers: true,
+    showLine: true,
+    colour_palette: ["#206095", "#A8BD3A", "#871A5B", "#F66068", "#05341A"],
+    line_colour: "#222222",
+    sourceText: "Office for National Statistics",
+    accessibleSummary: "Here is the screenreader text describing the chart.",
+    xAxisTickFormat: {
+      sm: "%b",
+      md: "%b",
+      lg: "%b",
+    },
+    xAxisNumberFormat: ".0f",
+    yAxisTickFormat: ".0f",
+    dateFormat: "%b-%y",
+    //the format your date data has in data.csv
+    yDomain: "auto",
+    // either "auto" or an array for the x domain e.g. [0,100]
+    line_series: "Total",
+    yAxisLabel: "y axis label",
+    stackOffset: "stackOffsetNone",
+    // options include
+    // stackOffsetNone means the baseline is set at zero
+    // stackOffsetExpand to do 100% charts
+    // stackOffsetDiverging for data with positive and negative values
+    stackOrder: "stackOrderNone",
+    // other options include
+    // stackOrderNone means the order is taken from the datafile
+    // stackOrderAppearance the earliest series (according to the maximum value) is at the bottom
+    // stackOrderAscending the smallest series (according to the sum of values) is at the bottom
+    // stackOrderDescending the largest series (according to the sum of values) is at the bottom
+    // stackOrderReverse reverse the order as set from the data file
+  },
+  optional: {
+    margin: {
+      sm: {
+        top: 50,
+        right: 5,
+        bottom: 50,
+        left: 40,
+      },
+      md: {
+        top: 50,
+        right: 20,
+        bottom: 50,
+        left: 40,
+      },
+      lg: {
+        top: 50,
+        right: 30,
+        bottom: 50,
+        left: 40,
+      },
+    },
+    chartGap: 10,
+    chart_every: {
+      sm: 2,
+      md: 2,
+      lg: 2,
+    },
+    aspectRatio: {
+      sm: [1.5, 1],
+      md: [1.5, 1],
+      lg: [1.5, 1],
+    },
+    xAxisTicksEvery: {
+      // this is the interval of ticks on the x axis - always including the first and last date
+      sm: 12,
+      md: 2,
+      lg: 2,
+    },
+    yAxisTicks: {
+      sm: 4,
+      md: 4,
+      lg: 6,
+    },
+    legendColumns: 4,
+    mobileBreakpoint: 510,
+    mediumBreakpoint: 600,
+    dropYAxis: true,
+  },
+  elements: { select: 0, nav: 0, legend: 0, titles: 0 },
+  chart_build: {},
 };
diff --git a/column-chart-stacked-with-line-sm/data.csv b/column-chart-stacked-with-line-sm/data.csv
@@ -1,41 +1,41 @@
-date,series,Category 1,Category 2,Category 3,Category 4 with a long name,Category 5
-Jan-20,series1,20.85373832,17.6949027,84.86276061,31.5783842,48.20562268
-Feb-20,series1,75.10385606,92.78801932,98.42939789,95.19411478,38.58584155
-Mar-20,series1,64.12511024,36.80002708,38.20913822,4.832285581,31.60393462
-Apr-20,series1,58.04407128,91.82819229,44.15710484,93.53981204,32.06639495
-May-20,series1,49.29571885,61.7405718,2.633201818,12.00880742,86.95296893
-Jun-20,series1,26.42919394,68.3881695,38.34804204,45.46625342,24.65361361
-Jul-20,series1,66.02170789,25.88544503,67.54775376,45.4008622,68.65015727
-Aug-20,series1,24.56805884,89.47462279,49.36685439,50.05168647,65.708543
-Sep-20,series1,27.48215082,14.64375439,66.97898751,58.11839376,9.358939682
-Oct-20,series1,48.97683167,80.16796002,18.79872569,90.21841354,57.08565289
-Jan-20,series2,0.933950623,9.624031575,72.95935918,6.77595291,28.53102882
-Feb-20,series2,42.67837059,46.59217919,67.77733609,8.925781009,1.795089023
-Mar-20,series2,47.00071225,9.037706465,10.9849663,0.452189724,20.59393944
-Apr-20,series2,24.20432653,59.86689017,42.15415468,72.6617888,31.66840009
-May-20,series2,41.54685317,23.16632079,2.389611457,4.813825608,12.61856841
-Jun-20,series2,3.798081223,45.01552316,1.591733076,42.1961274,5.81108836
-Jul-20,series2,56.69771887,25.70328174,31.2276681,4.687134985,23.4460375
-Aug-20,series2,2.291284423,20.75322693,45.39235296,32.55708764,31.58368269
-Sep-20,series2,8.979986448,11.44169148,40.6953067,33.53376474,1.417492362
-Oct-20,series2,14.49825282,18.73452297,9.162783215,80.32986673,6.273620969
-Jan-20,series3,87.72957303,78.20844009,73.61438423,71.32424048,79.91439476
-Feb-20,series3,58.16540724,32.99819999,9.856849706,97.34373835,79.99683494
-Mar-20,series3,8.772748019,40.13236012,92.61020539,33.55972913,77.76240631
-Apr-20,series3,73.95082667,61.47976532,30.56231134,9.679967748,56.50124322
-May-20,series3,72.50402495,56.47240048,94.8410951,44.48195369,10.88876233
-Jun-20,series3,54.39548057,12.38889185,93.59330285,73.79213895,21.36077763
-Jul-20,series3,38.83710414,19.76902548,41.46335831,5.805762559,71.14340522
-Aug-20,series3,3.418394354,94.12353895,46.79323662,49.58736749,99.44353072
-Sep-20,series3,70.22092796,56.52766708,18.36433592,13.47723194,86.93400296
-Oct-20,series3,68.36646707,53.41870414,87.80039611,88.98978628,12.66577263
-Jan-20,series4,13.46519787,57.03145807,89.4723652,25.4734746,64.31632125
-Feb-20,series4,97.75793294,10.90663142,64.13005332,79.10043408,97.75434054
-Mar-20,series4,67.45128621,23.08017243,64.4892647,78.80150895,8.03937043
-Apr-20,series4,27.47475335,43.02540187,25.78801009,86.70448892,21.11512093
-May-20,series4,11.57834567,82.57230791,77.34477933,79.81166212,10.9685112
-Jun-20,series4,95.83571673,48.28154456,84.4705485,90.31647127,1.451346358
-Jul-20,series4,82.09708714,98.10893307,79.22420574,47.50524785,86.11139071
-Aug-20,series4,5.29225365,91.58355761,51.62819774,88.4223957,66.89798742
-Sep-20,series4,96.14198802,93.32172592,93.58391111,19.84140874,83.39377318
-Oct-20,series4,53.9721427,68.97760975,51.39568127,53.4496707,79.33609547
+date,series,Category 1,Category 2,Category 3,Category 4,Total
+Jan-20,Group 1,20.85373832,17.6949027,84.86276061,31.5783842,48.20562268
+Feb-20,Group 1,75.10385606,92.78801932,98.42939789,95.19411478,38.58584155
+Mar-20,Group 1,64.12511024,36.80002708,38.20913822,4.832285581,31.60393462
+Apr-20,Group 1,58.04407128,91.82819229,44.15710484,93.53981204,32.06639495
+May-20,Group 1,49.29571885,61.7405718,2.633201818,12.00880742,86.95296893
+Jun-20,Group 1,26.42919394,68.3881695,38.34804204,45.46625342,24.65361361
+Jul-20,Group 1,66.02170789,25.88544503,67.54775376,45.4008622,68.65015727
+Aug-20,Group 1,24.56805884,89.47462279,49.36685439,50.05168647,65.708543
+Sep-20,Group 1,27.48215082,14.64375439,66.97898751,58.11839376,9.358939682
+Oct-20,Group 1,48.97683167,80.16796002,18.79872569,90.21841354,57.08565289
+Jan-20,Group 2,0.933950623,9.624031575,72.95935918,6.77595291,28.53102882
+Feb-20,Group 2,42.67837059,46.59217919,67.77733609,8.925781009,1.795089023
+Mar-20,Group 2,47.00071225,9.037706465,10.9849663,0.452189724,20.59393944
+Apr-20,Group 2,24.20432653,59.86689017,42.15415468,72.6617888,31.66840009
+May-20,Group 2,41.54685317,23.16632079,2.389611457,4.813825608,12.61856841
+Jun-20,Group 2,3.798081223,45.01552316,1.591733076,42.1961274,5.81108836
+Jul-20,Group 2,56.69771887,25.70328174,31.2276681,4.687134985,23.4460375
+Aug-20,Group 2,2.291284423,20.75322693,45.39235296,32.55708764,31.58368269
+Sep-20,Group 2,8.979986448,11.44169148,40.6953067,33.53376474,1.417492362
+Oct-20,Group 2,14.49825282,18.73452297,9.162783215,80.32986673,6.273620969
+Jan-20,Group 3,87.72957303,78.20844009,73.61438423,71.32424048,79.91439476
+Feb-20,Group 3,58.16540724,32.99819999,9.856849706,97.34373835,79.99683494
+Mar-20,Group 3,8.772748019,40.13236012,92.61020539,33.55972913,77.76240631
+Apr-20,Group 3,73.95082667,61.47976532,30.56231134,9.679967748,56.50124322
+May-20,Group 3,72.50402495,56.47240048,94.8410951,44.48195369,10.88876233
+Jun-20,Group 3,54.39548057,12.38889185,93.59330285,73.79213895,21.36077763
+Jul-20,Group 3,38.83710414,19.76902548,41.46335831,5.805762559,71.14340522
+Aug-20,Group 3,3.418394354,94.12353895,46.79323662,49.58736749,99.44353072
+Sep-20,Group 3,70.22092796,56.52766708,18.36433592,13.47723194,86.93400296
+Oct-20,Group 3,68.36646707,53.41870414,87.80039611,88.98978628,12.66577263
+Jan-20,Group 4,13.46519787,57.03145807,89.4723652,25.4734746,64.31632125
+Feb-20,Group 4,97.75793294,10.90663142,64.13005332,79.10043408,97.75434054
+Mar-20,Group 4,67.45128621,23.08017243,64.4892647,78.80150895,8.03937043
+Apr-20,Group 4,27.47475335,43.02540187,25.78801009,86.70448892,21.11512093
+May-20,Group 4,11.57834567,82.57230791,77.34477933,79.81166212,10.9685112
+Jun-20,Group 4,95.83571673,48.28154456,84.4705485,90.31647127,1.451346358
+Jul-20,Group 4,82.09708714,98.10893307,79.22420574,47.50524785,86.11139071
+Aug-20,Group 4,5.29225365,91.58355761,51.62819774,88.4223957,66.89798742
+Sep-20,Group 4,96.14198802,93.32172592,93.58391111,19.84140874,83.39377318
+Oct-20,Group 4,53.9721427,68.97760975,51.39568127,53.4496707,79.33609547