Develop Reference

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]] }
]
});
...

Highchart yaxis categories crowded

I have a highchart heatmap with categories. Since there are numerous categories the map looks crowded. Even though I enabled y-axis scrolling the pixel per category is too less and the map is practically un-usable.
Could someone please tell me how to scale the y-axis so that each category gets a definite height and is properly visible ?
https://jsfiddle.net/Lxw7gtas/
Highcharts.chart('container', {
data: {
rows: [["Sun, 07 Nov 2010 00:00:00 GMT", 0.0, 0],...],
seriesMapping: [{x: 0, value: 1, y: 2}]
},
chart: {
type: 'heatmap'
},
title: {
text: null
},
navigator: {
enabled: true
},
rangeSelector: {
enabled: true
},
boost: {
useGPUTranslations: true
},
xAxis: {
type: 'datetime',
labels: {
align: 'left',
x: 5,
y: 14,
format: '{value:%B}' // long month
},
showLastLabel: false,
tickLength: 16
},
yAxis: {
title: {
text: null
},
labels: {
},
type: 'category',
categories: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],
scrollbar: {
enabled: true
},
tickInterval: 1,
tickPixelInterval: 100,
legend: {
align: 'center',
layout: 'horizontal',
margin: 0,
verticalAlign: 'top',
floating: true,
/* y: 25, */
/* symbolHeight: 280 */
},
colorAxis: {
stops: [
[0, '#3060cf'],
[0.5, '#fffbbc'],
[0.9, '#c4463a'],
[1, '#c4463a']
],
labels: {
format: '{value}'
}
},
series: [{
boostThreshold: 100,
borderWidth: 10,
nullColor: '#EFEFEF',
turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
}],
plotOptions: {
series: {
dataLabels: {
overflow: 'none',
crop: true,
}
}
}
}});
Please see the picture
I want to increase spacing between categories

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/Highstock navigator won't reflect main chart data

I am trying to represent multi-series events on a timeline using a column chart in Highstock. For some reason the navigator won't show the data from all series in the main chart. It appears to be tied to a single series, but I can't find anything in the API reference that would make it show all the data.
jsFiddle: jsFiddle Example
Highcharts.stockChart configuration:
chart = new Highcharts.StockChart({
chart: {
alignTicks: true,
animation: true,
backgroundColor: '#fff',
events: {
load: function (e) {
this.xAxis[0].setExtremes(1398859200000, 1414753200000);
}
},
ignoreHiddenSeries: true,
renderTo: $('#chart')[0]
},
colors: [
'#89f1a4',
'#68d9f7',
'#9eb9ef',
'#c49eef'
],
credits: {
enabled: false
},
legend: {
align: 'center',
borderWidth: 0,
enabled: true,
navigation: {
animation: true
},
shadow: false,
verticalAlign: 'top'
},
rangeSelector: {
enabled: false
},
scrollbar: {
enabled: false
},
title: {
text: ''
},
tooltip: {
crosshairs: false,
shared: true
},
navigator: {
height: 40,
margin: 10,
maskFill: 'rgba(233, 233, 233, 0.7)',
outlineWidth: 0,
series: {
type: 'column',
stacking: 'normal',
dataGrouping: {
enabled: true,
forced: true,
units: [[
'week',
[1]
]]
}
}
},
plotOptions: {
series: {
showInLegend: true,
stacking: 'normal',
dataGrouping: {
enabled: true,
forced: true,
units: [[
'week',
[1]
]]
}
}
},
yAxis: {
gridLineWidth: 0,
labels: {
enabled: false
},
max: 24,
min: 0,
ordinal: false
},
xAxis: {
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%b %Y',
month: '%b %Y',
year: '%Y'
},
labels: {
style: {
color: '#ccc'
}
},
minRange: 604800000,
ordinal: false
},
series: data
});
My question:
How do I get the Navigator to reflect the complete data from the main chart?

As of 2016, this is still unsupported functionality.

highstock.js chart plotting is a bit off

I am using Highstock.js to represent a chart. The problem is that the plotting is showing values little to the right of the actual date on x-axis. The date in the legend matches to the date on x-axis. But the plotting is a bit to the right of that date when zoomed.
please check the fiddle
http://jsfiddle.net/HL7jX/
$('#container').highcharts('StockChart', {
chart: {
//type: 'area',
},
title: {
text: "Weekly Managed Product Fund Flows",
margin:50
},
rangeSelector: {
selected: 0,
align: "left",
buttons: [
{
type: 'month',
count: 1,
text: '1m'},
{
type: 'month',
count: 3,
text: '3m'},
{
type: 'month',
count: 6,
text: '6m'},
]
},
navigator: {
height: 10
},
xAxis: {
type:'datetime',
maxZoom: 24 * 3600000,
alignTicks : false
},
yAxis:[{
title: {
text: 'Flow US$ mill'
}
}, {
title: {
text: 'AMZ'
},
labels: {
format: '{value}'
},
opposite: true
}],
exporting: {
enabled: false
},
credits: {
enabled: false
},
legend: {
align: "top",
layout: "horizontal",
enabled: true,
verticalAlign: "middle",
x:250,
y:-150
/*labelFormatter: function() {
return this.name + ' (T)';
}*/
},
plotOptions:{
series:{
stacking: 'normal'
},
line:{
marker: {
symbol:"circle",
enabled: true
}
}
},
series: [/*{
type: 'area',
name: 'Total Flows',
data: all,
tooltip: {
valuePrefix: '$',
valueDecimals: 2
}
},*/{
type: 'area',
name: 'Mutual Fund Flows',
data: mf,
tooltip: {
valuePrefix: '$',
valueDecimals: 2
}
}, {
type: 'area',
name: 'ETF Flows',
data: etf,
tooltip: {
valuePrefix: '$',
valueDecimals: 2
}
},
{
type: 'line',
name:'Alerian AMZ Index',
yAxis: 1,
data: AMZ_YTD,
tooltip: {
valueDecimals: 2
}
}]
});

This apepars to be a matter of the timestanp passed.
For example: The AMZ Index series, for June 13th - your time stamp is 1371097800000.
This converts to Thu Jun 13 2013 00:30:00 GMT-0400 (Eastern Standard Time)
The tick is set for midnight, the data point value is a half hour later.
If you want the points to match up exactly, make sure the timestamps are set for midnight.
You can also set useUTC false to avoid issues with timezones.
http://api.highcharts.com/highcharts#global.useUTC