Merge pull request #99 from ONSvisual/Small-multiple-stacked-column

New template - small multiple stacked column

bar-chart-vertical-stacked-sm/chart.css

@@ -0,0 +1,18 @@
+.dataLabels{
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.chart-container {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.chart-container:last-child {
+  margin-right: 0;
+}
+
+.title {
+  font-weight: 600;
+  fill: #414042;
+}

bar-chart-vertical-stacked-sm/config.js

@@ -0,0 +1,77 @@
+config = {
+	"essential": {
+		"graphic_data_url": "data.csv",
+		"colour_palette": ["#206095", "#27A0CC", "#871A5B", "#A8BD3A", "#F66068"],
+		"sourceText": "Office for National Statistics",
+		"accessibleSummary": "Here is the screenreader text describing the chart.",
+		"xAxisTickFormat": {
+			"sm": "%Y",
+			"md": "%Y",
+			"lg": "%b-%y"
+		},
+		"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]
+		"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": {
+		"showStartEndDate": false,
+		"margin": {
+			"sm": {
+				"top": 40,
+				"right": 20,
+				"bottom": 50,
+				"left": 70
+			},
+			"md": {
+				"top": 40,
+				"right": 20,
+				"bottom": 50,
+				"left": 70
+			},
+			"lg": {
+				"top": 40,
+				"right": 20,
+				"bottom": 50,
+				"left": 70
+			}
+		},
+		"chart_every": {
+			"sm": 1,
+			"md": 2,
+			"lg": 2
+		},
+		"aspectRatio": {
+			"sm": [1, 1],
+			"md": [1, 1],
+			"lg": [1, 1]
+		},
+		"xAxisTicksEvery": {
+			"sm": 4,
+			"md": 4,
+			"lg": 3
+		},
+		"yAxisTicks": {
+			"sm": 4,
+			"md": 8,
+			"lg": 10
+		},
+		"mobileBreakpoint": 510,
+		"mediumBreakpoint": 600
+	},
+	"elements": { "select": 0, "nav": 0, "legend": 0, "titles": 0 },
+	"chart_build": {}
+};

bar-chart-vertical-stacked-sm/data.csv

@@ -0,0 +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

bar-chart-vertical-stacked-sm/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- TEMPLATE https://github.com/ONSvisual/census-charts/tree/main/bar-chart -->
+
+<head>
+  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
+  <title>Stacked Vertical Bar Chart Template</title>
+
+  <meta name="template" content="bar-chart">
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta charset="utf-8" />
+  <meta name="robots" content="noindex" />
+  <meta name="googlebot" content="indexifembedded" />
+
+  <link rel="stylesheet" href="../lib/globalStyle.css" />
+  <link rel="stylesheet" href="./chart.css" />
+</head>
+
+<body>
+
+  <h5 id="accessibleSummary" class="visuallyhidden"></h5>
+
+  <div aria-hidden="true" id="legend"></div>
+
+  <div id="graphic" aria-hidden="true">
+    <img src="fallback.png" alt="[Chart]" />
+  </div>
+
+
+  <h5 id="source">
+  </h5>
+
+  <script src="https://cdn.ons.gov.uk/vendor/d3/6.3.0/d3.min.js" type="text/javascript"></script>
+  <script src="https://cdn.ons.gov.uk/vendor/pym/1.3.2/pym.js" type="text/javascript"></script>
+  <script src="./config.js"></script>
+  <script src="./script.js"></script>
+
+</body>
+
+</html>