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

Highcharts - Format overlapping scatter points in a shared tooltip

I have a scatter chart in which there are some points in different series which overlap at exact points.
The x,y for both of these points in different series are same.
So I need to show both of them at the same time in tooltip.
However, the shared option only works when I'm not formatting the tooltip.
It doesn't work when I use pointFormat.
I tried to use formatter, but this just gives current point.
If I switch the chart to line chart, this gives points, which has all the points in the current position. With that, I can iterate and do the formatting.
Chart options:
{
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Height Versus Weight of 507 Individuals by Gender'
},
subtitle: {
text: 'Source: Heinz 2003'
},
xAxis: {
title: {
enabled: true,
text: 'Height (cm)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: Highcharts.defaultOptions.chart.backgroundColor,
borderWidth: 1
}, tooltip: {
formatter: function () {
console.log(this);
return this.points.reduce(function (s, point) {
return s + '<br/>' + point.series.name + ': ' +
point.point.options.dynamicText;
}, '<b>' + this.x + '</b>');
},
crosshairs:true,
shared: true
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
},
series: [{
name: 'Female',
color: 'rgba(223, 83, 83, .5)',
data: [{x:161.2, y:51.6, dynamicText:"foo1"}]
}, {
name: 'Male',
color: 'rgba(119, 152, 191, .5)',
data: [{x:161.2, y:51.6, dynamicText:"foo2"}]
}]
}
https://jsfiddle.net/dushyantbangal/ojqde34x/17/

Shared tooltip does not work with scatter series - please check this issue: https://github.com/highcharts/highcharts/issues/1431
The simplest solution is to use line series type with lineWidth property set to 0:
plotOptions: {
series: {
lineWidth: 0,
states: {
hover: {
lineWidthPlus: 0
}
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/3fda1nm4/
API Reference: https://api.highcharts.com/highcharts/series.line.lineWidth

Plot Bar chart and Line series chart on separate x-axis in Highcharts out of common dataset

I got common dataset for both line series and bar graph . In other words dataset consists both line series dataset and bar graph dataset. Now I want to plot line series graph on separate x-axis and bar graph on separate x-axis. And want to control them both from same frame. Like both tooltip for both should come in same popup, from same section I can show and hide them. Attached my screenshot , currently they are sharing same x-axis. I want to separate them. Here is my piece of code.
for(j=0; j<timelinejson.length; j++){
seriesOptions[j] = {
//name: selectedMarkers[i],
name: timelinejson[j].marker_desc,
data: mData,
marker : {
enabled : true,
radius : 3
},
type : 'spline',
tooltip : {
valueDecimals : 2
}
};
}
seriesOptions[10] = {
name: 'Speed',
data: [[1372636800000, 0.16], [1375315200000, 0.36], [1377993600000, 0.4], [1380585600000, 0.68], [1383264000000, 0.6], [1385856000000, 0.64], [1388534400000, 0.68], [1391212800000, 0.69], [1393632000000, 0.71], [1396310400000, 0.73], [1398902400000, 0.74], [1401580800000, 0.75], [1404172800000, 0.76], [1406851200000, 0.17], [1409529600000, 0.67], [1412121600000, 0.18], [1414800000000, 0.58], [1417392000000, 0.28], [1420070400000, 0.58], [1422748800000, 0.49], [1425168000000, 0.39], [1427846400000, 0.29], [1430438400000, 0.59], [1433116800000, 0.19]],
type: 'column',
valueDecimals: 1
};
drawTrend(seriesOptions,temp)
function drawTrend(marker_array_main,temp) {
$('#trendChart'+temp).highcharts('StockChart', {
chart: {
height: 400
//width: 500
},
rangeSelector: {
selected: 4
},
yAxis: {
/*labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},*/
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
legend: {
enabled: true,
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: 0,
y: 100
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> <br/>',
valueDecimals: 2
},
series: marker_array_main
});
}

I think that you can use multiple yAxis in case of your chart. You can add as many yAxes as you want and you can connect your series with this axes using yAxis:x parameter in your Series object.
x value is an index of specific axis in yAxis array.
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '60%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
series: [{
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
Here you can find simple example of this kind of chart from Highcharts demos:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/

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.

HighCharts not plotting decimal values in x-axis

I'm trying to plot decimal values on my x-axis, but each of my data points gets placed only on my major tick marks (at whole numbers). I'm using an array of [x,y] paired data, e.g. [[35,1500], [35.21,2000], [35.72,3500], [36.32,4000]]
What is happening, is the first item get's placed over the starting value (35), the second value (x 35.21) is being placed directly over 36, the next value (x 35.72) gets placed over 37, etc. It's as if the x-value in my data is being ignored.
Here is the chart's setup attributes:
chart: {
zoomType: 'x',
spacingRight: 10,
type: 'area'
},
title: {
text: null
},
xAxis: {
allowDecimals: true,
tickInterval: 1,
minorTickInterval: 10,
labels: {
step: 1
},
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'total$'
}
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
plotOptions: {
area: {
pointStart: 35,
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [
{
//index: 1,
name: 'trajectory$',
data: progressUpdateData,
}
]
How do I get the x-values plotted properly?
Thanks

Here's a fiddle showing your points in-between whole numbers
http://jsfiddle.net/LLExL/2462/
plotOptions: {
area: {
pointStart: 35,
pointPlacement: 'between',
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
}
You might want to look at http://api.highcharts.com/highcharts#plotOptions.area.pointPlacement as maybe you have this set to "on" instead of "between" somewhere?

Will's answer didn't work for me. However, setting a min and a max to yAxis did. If you have these values [[35,1500], [35.21,2000], [35.72,3500], [36.32,4000]], you simply set a minimum of 35 and a maximum of 37.
This
yAxis: {
min: 0,
title: {
text: 'total$'
}
},
became this
yAxis: {
min: 35,
max: 37,
title: {
text: 'total$'
}
},