How to render the missing data series and fix the dates on the x-axis in Highcharts?

Viewed 53

I am trying to re-create the same line chart that is seen below using the Highcharts library. I can't figure out how can I display the date on the x-axis the same way it is shown on the image, and also why my third data series is not getting displayed?

enter image description here

Here's my code:

https://jsfiddle.net/samwhite/271gxvuL/1/

xAxis: {
      crosshair: true,
      title: { text: 'Date' },
      categories: ['Jan 04', 'Jan 11', 'Jan 18', 'Jan 25'],
      tickmarkPlacement: 'on'
    },
    yAxis: {
      tickInterval: 10,
      min: 5,
      max: 40,
      title: {
        text: '# of Shares (mm)'
      },
      gridLineWidth: 0,
      minorGridLineWidth: 0
    },
    legend: {
      title: { text: 'Option Series' },
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle'
    },
    series: [{
      name: 'GME Call',
      color: "#00429d",
      data: [18.40345395, 18.32595087, 19.15087983, 19.16410026, 18.55687485, 20.95533447, 20.4068335, 30.04684925, 33.73630533, 32.00319773, 20.66296168, 20.77395832, 23.55373851, 38.30826413, 29.98265297, 34.92300725, 32.19425239, 28.27697149, 31.92597248],
      marker: { enabled: false },
      label: { enabled: false }
    }, {
      name: 'GME Net',
      color: "#009c56",
      data: [3.981667259, 3.699835889, 5.707331914, 5.583661701, 4.031818851, 9.716787874, 8.218344693, 24.91298209, 29.72145703, 27.10696218, 15.76613521, 15.21344769, 18.31385242, 33.94138296, 24.14691476, 30.91437069, 30.15361859, 24.33123219, 29.52458396],
      marker: { enabled: false },
      label: { enabled: false }
    }, {
      name: 'GME Put',
      color: "#f79646",
      data: [-14.42178669, -14.62611498, -13.44354791, -13.58043856, -14.525056, -11.2385466, -12.18848881, -5.133867153, -4.014848306, -4.896235549, -4.896826466, -5.560510629, -5.239886084, -4.366881175, -5.835738209, -4.00863656, -2.040633802, -3.945739308, -2.401388521],
      marker: { enabled: false },
      label: { enabled: false }
    }],
1 Answers
Related