Q: How to re-create the same chart in Highcharts as seen on the mock?

Attempt to answer this question: How to re-create the same chart in Highcharts as seen on the mock? Source: https://stackoverflow.com/questions/67337429/how-to-re-create-the-same-chart-in-highcharts-as-seen-on-the-mock

by MauricioSO2021

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<div id="container"></div>

JavaScript

/*
	Sources:
  
  * https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/combo-dual-axes
  
  * https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/combo-dual-axes
  
  * https://www.highcharts.com/docs/chart-concepts/plot-bands-and-plot-lines
  
  * https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-dashstyle-all/
  
  * https://api.highcharts.com/class-reference/Highcharts#.DashStyleValue
  
  * https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/xaxis/labels-step/
  
  * https://www.highcharts.com/docs/chart-concepts/understanding-highcharts
  
  * https://www.highcharts.com/docs/chart-concepts/axes?_ga=2.227511582.220005933.1619809828-761661522.1619809828
  
  * https://api.highcharts.com/highcharts/yAxis.lineColor
  
  * https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/yaxis/linecolor/
  
  * https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/xaxis/tickcolor/
  
  * https://api.highcharts.com/highcharts/yAxis.tickColor
  
  * https://stackoverflow.com/a/26530159/12511801
  
  * https://stackoverflow.com/a/20983707/12511801
  
  * 
  
*/

Highcharts.chart('container', {
  chart: {
    type: 'line',
    zoomType: 'x'
  },
  title: {
    text: ''
  },

  subtitle: {
    text: ''
  },

  yAxis: {
    title: {
      text: ''
    },
    labels: {
      format: '{value:.1f}%',
      valueDecimals: 1,
      step: 2, // i.e: 0.1, 0.2, etc. It depends of the data, though.
      // Style: not sure if there is a better way:
      // Source: https://api.highcharts.com/highmaps/colorAxis.labels.style
      style: {
        color: '#000000'
      }
    },
    custom: {
      allowNegativeLog: false
    },
    plotLines: [{
      color: 'black', // Color value
      dashStyle: 'LongDash', //...