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?
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 }
}],
