diff --git a/components/Charts/OpenChart.vue b/components/Charts/OpenChart.vue
index fd77f0fb..358424b1 100644
--- a/components/Charts/OpenChart.vue
+++ b/components/Charts/OpenChart.vue
@@ -112,6 +112,7 @@
       :convert-value="convertValue"
       :pad-y-axis="padYAxis"
       :annotations="annotations"
+      :path-stroke-width="3"
       class="vis-chart"
       @date-hover="handleDateHover"
       @domain-hover="handleDomainHover"
diff --git a/components/MetricsSelect.vue b/components/MetricsSelect.vue
index 08b3f38b..5252d2bd 100644
--- a/components/MetricsSelect.vue
+++ b/components/MetricsSelect.vue
@@ -6,6 +6,14 @@
         value="carbonIntensity">
         Carbon intensity
       </option>
+
+      <optgroup label="Generation">
+        <option value="renewables">Renewables generation</option>
+        <option value="solar">Solar generation</option>
+        <option value="wind">Wind generation</option>
+        <option value="gas">Gas generation</option>
+        <option value="coal">Coal generation</option>
+      </optgroup>
             
       <optgroup label="Proportion of demand">
         <option value="netInterconnectorFlow">
diff --git a/components/Vis/MultiLine.vue b/components/Vis/MultiLine.vue
index da0baa9b..46719a50 100644
--- a/components/Vis/MultiLine.vue
+++ b/components/Vis/MultiLine.vue
@@ -529,7 +529,7 @@ export default {
         .style('opacity', 0.9)
         .style('stroke-width', (d) => {
           const find = this.domains1.find((domain) => domain.id === d)
-          return find ? find.pathStrokeWidth : this.pathStrokeWidth
+          return find && find.pathStrokeWidth ? find.pathStrokeWidth : this.pathStrokeWidth
         })
 
       this.$projectionVisGroup
@@ -803,7 +803,7 @@ export default {
           .style('stroke', (key) => this.colours1[key])
           .style('stroke-width', (d) => {
             const find = this.domains1.find((domain) => domain.id === d)
-            return find ? find.pathStrokeWidth : this.pathStrokeWidth
+            return find && find.pathStrokeWidth ? find.pathStrokeWidth : this.pathStrokeWidth
           })
           // .style('filter', 'url(#shadow)')
           .style('stroke-dasharray', this.strokeDasharray)
@@ -863,7 +863,7 @@ export default {
         .style('stroke', (key) => this.colours1[key])
         .style('stroke-width', (d) => {
             const find = this.domains1.find((domain) => domain.id === d)
-            return find ? find.pathStrokeWidth : this.pathStrokeWidth
+            return find && find.pathStrokeWidth ? find.pathStrokeWidth : this.pathStrokeWidth
           })
         // .style('filter', 'url(#shadow)')
         .style('fill', 'transparent')
diff --git a/constants/stripes/index.js b/constants/stripes/index.js
index 427f900b..b8a36b96 100644
--- a/constants/stripes/index.js
+++ b/constants/stripes/index.js
@@ -113,6 +113,57 @@ export const metrics = [
     legendType: 'ramp'
   },
 
+  {
+    label: 'Renewables generation',
+    value: 'renewables',
+    divisor: 100,
+    domain: [0, 0.5, 1],
+    range: ['#fff', '#52BCA3', 'darkgreen'],
+    unit: 'GWh',
+    numberFormatString: '',
+    legendType: 'ramp'
+  },
+  {
+    label: 'Solar generation',
+    value: 'solar',
+    divisor: 100,
+    domain: [0, 0.5, 1],
+    range: ['#fff', '#F3E13E', '#F0D800'],
+    unit: 'GWh',
+    numberFormatString: '',
+    legendType: 'ramp'
+  },
+  {
+    label: 'Wind generation',
+    value: 'wind',
+    divisor: 100,
+    domain: [0, 0.5, 1],
+    range: ['#fff', '#88B653', '#417505'],
+    unit: 'GWh',
+    numberFormatString: '',
+    legendType: 'ramp'
+  },
+  {
+    label: 'Gas generation',
+    value: 'gas',
+    divisor: 100,
+    domain: [0, 0.5, 1],
+    range: ['#52BCA3', '#ccc', '#F48E1B'],
+    unit: 'GWh',
+    numberFormatString: '',
+    legendType: 'ramp'
+  },
+  {
+    label: 'Coal generation',
+    value: 'coal',
+    divisor: 100,
+    domain: [0, 0.5, 1],
+    range: ['#52BCA3', '#ccc', '#131313'],
+    unit: 'GWh',
+    numberFormatString: '',
+    legendType: 'ramp'
+  },
+
   {
     label: 'Wind value',
     value: 'windValue',
diff --git a/data/transform/energy-to-stripe-metrics.js b/data/transform/energy-to-stripe-metrics.js
index 4abff570..8edfad6c 100644
--- a/data/transform/energy-to-stripe-metrics.js
+++ b/data/transform/energy-to-stripe-metrics.js
@@ -213,6 +213,7 @@ function updateMetricObject(
     }
 
     obj.carbonIntensity = setCarbonIntensity(ei, isValidEI)
+
     obj.renewablesProportion =
       d._totalDemandRenewablesPercentage < 0
         ? 0
@@ -226,7 +227,13 @@ function updateMetricObject(
     obj.coal = d._totalCoal
     obj.gasProportion =
       d._totalDemandGasProportion < 0 ? 0 : d._totalDemandGasProportion
+
     obj.gas = d._totalGas
+    obj.wind = d._totalWind
+    obj.solar = d._totalSolar
+    obj.renewables = d._totalRenewables
+    obj.coal = d._totalCoal
+
     obj.temperature = temperature
     obj.maxTemperature = maxTemperature
     obj.minTemperature = minTemperature