Develop Reference

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

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

You need to change your data into the array of arrays, where nested array includes the x date format, something like:
[[ x date in miliseconds, y value]]
You can use the pointStart & pointInterval features:
https://api.highcharts.com/highcharts/series.line.pointStart
https://api.highcharts.com/highcharts/series.line.pointInterval
You can define wanted a array of categories that you want to display on the xAxis - just like is done in your example

Getting the tooltip values from Highchart graph in the source code

I want to get the Vacancies and Vacancy Rate values that appear in the tooltip when the cursor hovers over this graph, however ideally I want to grab it straight from the source code. I found a dictionary in the code, though its values are different to what appears in the tooltip.
Eg Value in dict: 34, Value in tooltip: 1
Eg Value in dict: 1055.6270096463, Value in tooltip: 15.8
I'm guessing the values are being changed by some function, though I can't find it in the code. Below is the section of code relating to the tooltip. Any help would be appreciated.
...
var xmin=$( window ).width()>1000 ? 1209564000000:1504188000000;
function _f(n) {
return 3.8*n*(1-n);
}
$(function () {
Highcharts.setOptions({
global: {
// display dates in local time (hourly graph should start at midnight if in california)
useUTC: false
},
lang: {
thousandsSep: ','
}
});
});
Highcharts.chart('hichartcontainer', {
chart: {
type: 'line',
zoomType: 'x'
},
colors: [ '#0a94ff', '#a004a0', '#ff00ff', '#a004a0', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'],
title: {
text: 'Residential Vacancy Rates',
},
subtitle: {
text: 'Source: SQM Research'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
},
scrollbar: {
enabled: true
},
tickInterval: 1000 * 60 * 60 * 24 * 365,
//min:xmin // enable this to have mob fone show 2 yr only
},
yAxis: [{
min: 0,
// max:200, work this out in php for fixed y axis
title: {
text: 'Vacancies'
}
},
{
min: 0,
// max:10, work this out in phpfor fixed y axis
title: {
text: 'Vacancy Rate (%)'
},
opposite:true
}
],
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
plotOptions: {
series: {
dataLabels: {
enabled: false
},
getExtremesFromAll:true
}
},
series: [ {
name: 'Vacancies',
type: 'column',
yAxis: 0,
tooltip: {
headerFormat: '<b>{point.key}</b><br/>',
pointFormat: '{series.name}: {point.y}',
xDateFormat:'%b %Y'
},
data: [[1209564000000,34],[1212242400000,0],[1214834400000,0],[1217512800000,0],[1220191200000,0],[1222783200000,0],[1225458000000,0],[1228050000000,0],[1230728400000,0],[1233406800000,0],[1235826000000,0],[1238504400000,0],[1241100000000,0],[1243778400000,22],[1246370400000,0],[1249048800000,1445],[1251727200000,768],[1254319200000,1330],[1256994000000,380],[1259586000000,1740],[1262264400000,2325],[1264942800000,600],[1267362000000,1440],[1270040400000,3542],[1272636000000,3283],[1275314400000,2100],[1277906400000,1508],[1280584800000,2185],[1283263200000,817],[1285855200000,2030],[1288530000000,2604],[1291122000000,750],[1293800400000,1800],[1296478800000,1540],[1298898000000,1943],[1301576400000,2772],[1304172000000,1508],[1306850400000,2185],[1309442400000,414],[1312120800000,1254],[1314799200000,2418],[1317391200000,408],[1320066000000,1190],[1322658000000,1360],[1325336400000,1020],[1328014800000,1365],[1330520400000,416],[1333198800000,1230],[1335794400000,1008],[1338472800000,1504],[1341064800000,374],[1343743200000,1386],[1346421600000,1445],[1349013600000,564],[1351688400000,1045],[1354280400000,399],[1356958800000,1239],[1359637200000,1288],[1362056400000,405],[1364734800000,1596],[1367330400000,1470],[1370008800000,1600],[1372600800000,1736],[1375279200000,1710],[1377957600000,560],[1380549600000,1392],[1383224400000,836],[1385816400000,2632],[1388494800000,396],[1391173200000,1518],[1393592400000,2295],[1396270800000,1128],[1398866400000,1995],[1401544800000,266],[1404136800000,1121],[1406815200000,2024],[1409493600000,588],[1412085600000,1140],[1414760400000,966],[1417352400000,1377],[1420030800000,708],[1422709200000,1104],[1425128400000,464],[1427806800000,858],[1430402400000,320],[1433080800000,522],[1435672800000,294],[1438351200000,1116],[1441029600000,286],[1443621600000,360],[1446296400000,1140],[1448888400000,1173],[1451566800000,1215],[1454245200000,826],[1456750800000,920],[1459429200000,203],[1462024800000,390],[1464703200000,320],[1467295200000,348],[1469973600000,126],[1472652000000,186],[1475244000000,78],[1477918800000,511],[1480510800000,1036],[1483189200000,720],[1485867600000,380],[1488286800000,280],[1490965200000,240],[1493560800000,840],[1496239200000,1547],[1498831200000,510],[1501509600000,1360],[1504188000000,682],[1506780000000,540],[1509454800000,315],[1512046800000,516],[1514725200000,184],[1517403600000,658],[1519822800000,160],[1522501200000,310],[1525096800000,270],[1527775200000,102],[1530367200000,0],[1533045600000,94],[1535724000000,190],[1538316000000,60],[1540990800000,180],[1543582800000,273],[1546261200000,30],[1548939600000,0],[1551358800000,186],[1554037200000,180],[1556632800000,36],[1559311200000,261],[1561903200000,42],[1564581600000,0]] },
{
name: 'Vacancy Rate',
type: 'line',
yAxis: 1,
tooltip: {
headerFormat: '<b>{point.key}</b><br/>',
pointFormat: '{series.name}: {point.y:,.1f}%',
xDateFormat:'%b %Y'
},
data: [[1209564000000,11.221122112211],[1212242400000,0],[1214834400000,0],[1217512800000,0],[1220191200000,0],[1222783200000,0],[1225458000000,0],[1228050000000,0],[1230728400000,0],[1233406800000,0],[1235826000000,0],[1238504400000,0],[1241100000000,0],[1243778400000,7.1661237785016],[1246370400000,0],[1249048800000,469.15584415584],[1251727200000,249.35064935065],[1254319200000,431.81818181818],[1256994000000,122.97734627832],[1259586000000,563.1067961165],[1262264400000,752.42718446602],[1264942800000,193.54838709677],[1267362000000,464.51612903226],[1270040400000,1142.5806451613],[1272636000000,1055.6270096463],[1275314400000,675.24115755627],[1277906400000,484.88745980707],[1280584800000,702.57234726688],[1283263200000,261.85897435897],[1285855200000,650.64102564103],[1288530000000,834.61538461538],[1291122000000,239.61661341853],[1293800400000,575.07987220447],[1296478800000,492.01277955272],[1298898000000,618.7898089172],[1301576400000,882.8025477707],[1304172000000,480.25477707006],[1306850400000,695.85987261146],[1309442400000,131.42857142857],[1312120800000,398.09523809524],[1314799200000,767.61904761905],[1317391200000,129.52380952381],[1320066000000,376.58227848101],[1322658000000,430.37974683544],[1325336400000,322.78481012658],[1328014800000,431.96202531646],[1330520400000,131.64556962025],[1333198800000,389.24050632911],[1335794400000,317.98107255521],[1338472800000,474.44794952681],[1341064800000,117.98107255521],[1343743200000,437.22397476341],[1346421600000,455.83596214511],[1349013600000,177.35849056604],[1351688400000,328.61635220126],[1354280400000,125.47169811321],[1356958800000,389.62264150943],[1359637200000,405.03144654088],[1362056400000,127.35849056604],[1364734800000,500.31347962382],[1367330400000,460.81504702194],[1370008800000,501.56739811912],[1372600800000,544.20062695925],[1375279200000,536.05015673981],[1377957600000,175],[1380549600000,435],[1383224400000,261.25],[1385816400000,822.5],[1388494800000,123.75],[1391173200000,472.89719626168],[1393592400000,714.95327102804],[1396270800000,351.40186915888],[1398866400000,621.4953271028],[1401544800000,82.866043613707],[1404136800000,349.22118380062],[1406815200000,628.57142857143],[1409493600000,182.60869565217],[1412085600000,354.03726708075],[1414760400000,300],[1417352400000,427.6397515528],[1420030800000,219.19504643963],[1422709200000,341.79566563467],[1425128400000,143.65325077399],[1427806800000,265.6346749226],[1430402400000,99.071207430341],[1433080800000,161.60990712074],[1435672800000,90.740740740741],[1438351200000,344.44444444444],[1441029600000,88.271604938272],[1443621600000,111.11111111111],[1446296400000,351.85185185185],[1448888400000,360.92307692308],[1451566800000,373.84615384615],[1454245200000,254.15384615385],[1456750800000,283.07692307692],[1459429200000,62.461538461538],[1462024800000,120],[1464703200000,98.159509202454],[1467295200000,106.74846625767],[1469973600000,38.650306748466],[1472652000000,57.055214723926],[1475244000000,23.926380368098],[1477918800000,156.26911314985],[1480510800000,316.81957186544],[1483189200000,220.18348623853],[1485867600000,116.20795107034],[1488286800000,85.626911314985],[1490965200000,73.394495412844],[1493560800000,256.09756097561],[1496239200000,471.64634146341],[1498831200000,155.48780487805],[1501509600000,414.63414634146],[1504188000000,207.92682926829],[1506780000000,164.13373860182],[1509454800000,95.744680851064],[1512046800000,156.83890577508],[1514725200000,55.927051671733],[1517403600000,200],[1519822800000,48.632218844985],[1522501200000,93.939393939394],[1525096800000,81.818181818182],[1527775200000,30.909090909091],[1530367200000,0],[1533045600000,28.484848484848],[1535724000000,57.401812688822],[1538316000000,18.126888217523],[1540990800000,54.380664652568],[1543582800000,82.477341389728],[1546261200000,9.0634441087613],[1548939600000,0],[1551358800000,56.024096385542],[1554037200000,54.21686746988],[1556632800000,10.843373493976],[1559311200000,78.614457831325],[1561903200000,12.650602409639],[1564581600000,0]] }
]
});
...

Highcharts stacked bar with datetime, not able to set start date

I'm trying to use a stacked bar to represent up/down status over time. For some reason, I'm not able to get the start date to work correctly.
This is what I'm going for, but the start date won't update past epoch start.
http://jsfiddle.net/t5d72ka5/4/
Highcharts.chart('container', {
chart: {
type: 'bar',
backgroundColor:'transparent',
zoomType:'y'
},
title: {
text: ''
},
xAxis: {
},
yAxis: {
//min: 1502236800000 or min: Date.UTC(2011, 4, 31)
type: 'datetime',
"tickInterval": 86400000,
"minTickInterval": 86400000,
dateTimeLabelFormats: {
day: '%Y %b %e'
},
title: {
enabled: false
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [
{
name: 'down',
data: [83621000],
color: 'red'
}, {
name: 'up',
data: [83621000],
color: 'green'
}, {
name: 'down',
data: [83621000],
color: 'red'
}, {
name: 'up',
data: [83621000],
color: 'green'
}]
});
I've tried to add the start date in min: 1502236800000 or with UTC and while it sets the start date right, the data doesn't render.
Also tried a few other things with the data values, pointStart, etc. but can't this to work.

I suppose that threshold option is what you're looking for:
plotOptions: {
series: {
stacking: 'normal',
threshold: 1502236800000
}
},
Live demo: http://jsfiddle.net/BlackLabel/jyjfvoac/
API reference: https://api.highcharts.com/highcharts/series.column.threshold

HighCharts axis flip on export

I have a Highchart in my web application. In the browser it displays normally which is as follows:
But when I export the chart it flips the axis and I end up with the following image:
Following are the options I am using for my Highchart.
var options = ({
chart: {
renderTo: 'chartDiv'
},
credits: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
tickInterval: 7200 * 10000,
allowDecimals:false,
labels: {
format: '{value}',
rotation: 30,
align: 'left',
},
title: {
text: 'Date'
}
},
yAxis: [{
title: {
text: 'No. of rings'
},
min: 0
},
{ // Secondary yAxis
gridLineWidth: 0,
min: 0,
title: {
text: 'Accumulative Rings',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} Ring',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true,
}
],
tooltip: {
shared: true
},
legend: { backgroundColor: 'rgba(211,223,181,0.6)', layout: 'vertical', align: 'left', verticalAlign: 'top', floating: true, borderWidth: 0, x: 70 },
plotOptions: {
spline: {
marker: {
enabled: false
},
}
}
});
I have three series in my chart, the bar chart can have 0 values.
The data is coming from an ajax service, which I put in an array and then add to chart as follows:
chart.addSeries({
type: 'bar',
name: 'Rings per day ',
data: barData,
pointInterval: mainInterval
});
chart.addSeries({
type: 'spline',
name: 'Accumilative rings ',
data: spline1Data,
yAxis: 1,
});
chart.addSeries({
type: 'spline',
name: 'Planned Progress ',
data: spline2Data,
yAxis: 1,
color: "#FF0000"
});
What's wrong with my chart?

bar series is the key part. bar series forces chart to be rendered flipped. In your case use column. It displays differently on your browser because, most probably, you have an old version of Highcharts.

Wrong alignment in highcharts datetime points with xaxis

Here's a fiddle with my problem: http://jsfiddle.net/v0bxdqa7/5/
As you can see, the point is not aligned with the xaxis value.
I've come to believe, from the examples shown in highcharts website, that the problem is with my data, but I can't find the exact problem with it.
Any ideas?
My options:
rangeSelector: {
inputEnabled: false,
selected: 1,
buttons: [{
type: 'day',
count: 7,
text: '7'
}, {
type: 'day',
count: 30,
text: '30'
}, {
type: 'year',
count: 1,
text: '365'
}, {
type: 'ytd',
text: 'year'
}]
},
tooltip: {
headerFormat: '<small style="color: #666680">{point.key}</small><br>',
pointFormat: '<span style="color: #acacbf">{series.name}: </span>' +
'<span style="color: #666680"><b>{point.y}</b></span>'
},
xAxis: {
lineColor: '#ebebeb',
type: 'datetime',
labels: {
style: {
color: '#acacbf'
},
align: "center",
maxStaggerLines: 1,
overflow: false
}
},
yAxis: {
allowDecimals: false,
gridLineWidth: 0,
labels: {
enabled: false,
style: {
color: '#acacbf'
}
},
min: 0,
floor: 0,
minRange:1
},
navigator: {enabled: false},
chart: {
className: "line-chart",
backgroundColor: "#f7f7f7",
margin:[10,5,22,5]
},
plotOptions: {
series: {
marker: {
enabled: true,
states: {
hover: {
radius: 5
},
select: {
enabled: true,
radius: 5,
fillColor: '#ffffff',
lineColor: '#ad49a5'
}
}
}
}
},
scrollbar: {
enabled: false
},
colors: ["#ad49a5"]

Indeed your (timestamp) data is wrong.
Take the first one for example: 1370787037000 if you convert it you get Sun, 09 Jun 2013 14:10:37 GMT and that is exactly what's drawn on the chart.
If you want this point to be precisely on Sun, 09 Jun 2013 00:00:00 GMT its correct timestamp is 1370736000000. You have to do this for each date.