How to add second series to highcharts master-detail?

Question

Highcharts

Hello everyone, I'm using highcharts to create a master-detail chart, can anyone help me how to add another series type area to the chart?

const priceChart1 = Highcharts.getJSON(
'https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/usdeur.json',
data => {
  let detailChart;

  // create the detail chart
  function createDetail(masterChart) {
    // prepare the detail chart
    var detailData = [],
      detailStart = data[0][0];

    masterChart.series[0].data.forEach(point => {
      if (point.x >= detailStart) {
        detailData.push(point.y);
      }
    });

    // create a detail chart referenced by a global variable
    detailChart = Highcharts.chart('detail-container', {
      chart: {
        zoomType: "x",
        spacingLeft: 10,
        spacingRight: -20,
        borderRadius: 10,
        backgroundColor: "#F3F3F3",
        borderColor: "#335cad",
        height: priceChartHeight,
        style: { fontFamily: "Manrope" },
        style: {
          position: 'absolute'
        },
        resetZoomButton: {
          position: {
              // align: 'right', // by default
              // verticalAlign: 'top', // by default
              x: -40,
              y: 5
          },
          theme: {
            fill: '#377DED',
            stroke: 'transparent',
            r: 0,
            style: {
              color: 'white',
              borderRadius: 10
            },
            states: {
                hover: {
                    fill: '#41739D',
                    style: {
                        color: 'white'
                    },
                },
           
      },
      },
        },
        marginBottom: 90,
        reflow: false,
        marginLeft: 10,
        style: {
          position: 'absolute'
        }
      },
      credits: {
        enabled: false
      },
      title: {
        text: null,
        align: 'left'
      },
      subtitle: {
        text: null,
        align: 'left'
      },
      xAxis: {
        type: 'datetime',
        visible: false,
      },
      yAxis: {
        title: {
          text: null,
        },
        opposite: true,
        gridLineColor: "rgba(87, 87, 87, 0.15)",
        gridLineDashStyle: "dash",
        left: -40
      },
      tooltip: {
        formatter: function () {
          var point = this.points[0];
          return ''  + '<br/>' + ' <span style="font-weight: 700;font-size: 14px; line-height: 19px; color: #377DED;"> '  + Highcharts.numberFormat(point.y, 2) + '</span> ' + '<span style="font-size: 9px; font-weight: 300; line-height: 12px; color: rgba(51,51,51, 0.25)">Nominal</span>'  + '<br/> ' + '<span style="font-size: 9px; font-weight: 300; line-height: 12px; color: rgba(51,51,51, 0.25)">' + Highcharts.dateFormat('%e %B %Y', this.x) + '</span>'  },
        shared: true,
        borderRadius: 5,
          borderColor: 'transparent',
          shadow: false,
          backgroundColor: '#fff'
      },
      legend: {
        enabled: false
      },
      plotOptions: {
        series: {
          marker: {
            enabled: false,
            states: {
              hover: {
                enabled: true,
                radius: 3
              }
            }
          }
        }
      },
      series: [
        {
          name: 'Nominal',
          data: detailData,

          type: 'area',
      }, 
    ],

      exporting: {
        enabled: false
      }

    }); // return chart
  }

  // create the master chart
  function createMaster() {
    Highcharts.chart('master-container', {
      chart: {
        reflow: false,
        borderWidth: 0,
        backgroundColor: null,
         spacingLeft: 10,
        spacingRight: 30,
        borderRadius: 10,
        zoomType: 'x',
        events: {

          // listen to the selection event on the master chart to update the
          // extremes of the detail chart
          selection: function (event) {
            var extremesObject = event.xAxis[0],
              min = extremesObject.min,
              max = extremesObject.max,
              
              detailData = [],
              xAxis = this.xAxis[0];
            // reverse engineer the last part of the data
            this.series[0].data.forEach(point => {
              if (point.x > min && point.x < max) {
                detailData.push([point.x, point.y]);
              }
            });

            // move the plot bands to reflect the new detail span
            xAxis.removePlotBand('mask-before');
            xAxis.addPlotBand({
              id: 'mask-before',
              from: data[0][0],
              to: min,
              color: 'rgba(0, 0, 0, 0)'
            });

            xAxis.removePlotBand('mask-after');
            xAxis.addPlotBand({
              id: 'mask-after',
              from: max,
              to: data[data.length - 1][0],
              color: 'rgba(0, 0, 0, 0)'
            });
            xAxis.addPlotBand({
              id: 'mask-after',
              from: min,
              to: max,
              color: 'rgba(255, 255, 255, 1)',
              borderColor: "#377DED",
              borderWidth: 2
            });


            detailChart.series[0].setData(detailData);
            console.log(min)

            console.log(max)

            return false;
          }
        }
      },
      title: {
        text: null
      },
      accessibility: {
        enabled: false
      },
      xAxis: {
          type: "datetime",
          labels: {    format: '{value:%b %e }'  },
          crosshair: {
            color: '#377DED80'
          },
          lineWidth: 0,   minorGridLineWidth: 0,   lineColor: 'transparent', minorTickLength: 0,   tickLength: 0,
          top: -5,
        showLastTickLabel: true,
        maxZoom: 14 * 24 * 3600000, // fourteen days
        plotBands: [{
          id: 'mask-before',
          from: data[0][0],
          to: data[data.length - 1][0],
          color: 'rgba(0, 0, 0, 0)'
        }],
        title: {
          text: null
        },
      },
      yAxis: {
        gridLineWidth: 0,
        labels: {
          enabled: false
        },
        title: {
          text: null
        },
        min: 0.6,
        showFirstLabel: false
      },
      tooltip: {
        borderRadius: 50,
        borderColor: 'red'
        
      },
      legend: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      plotOptions: {
        series: {
          fillColor: {
            linearGradient: [0, 0, 0, 70],
            stops: [
              [0, Highcharts.getOptions().colors[0]],
              [1, 'rgba(255,255,255,0)']
            ]
          },
          lineWidth: 1,
          marker: {
            enabled: false
          },
          shadow: false,
          states: {
            hover: {
              lineWidth: 1
            }
          },
          enableMouseTracking: false
        }
      },

      series: [{
        type: 'area',
        name: 'USD to EUR',
        pointInterval: 24 * 3600 * 1000,
        pointStart: data[0][0],
        data: data
      }],

      exporting: {
        enabled: false
      }

    }, masterChart => {
      createDetail(masterChart);
    }); // return chart instance
  }

  // make the container smaller and add a second container for the master chart
  const container = document.getElementById('price-chart-main');
  container.style.position = 'relative';
  container.innerHTML += '<div id="detail-container" style="height: 100%"></div><div id="master-container" style="height: 90px; position: absolute; bottom: 0; width: 100%"></div>';

  // create master and in its callback, create the detail chart
  createMaster();
}

Example I used: https://www.highcharts.com/demo/dynamic-master-detail