Develop Reference

Highcharts exporting menu too big

I'm building an Angular app where I use higcharts. The issue I have is the size of the exporting dialog box. I have several graphs on the page, but only one graph has this problem, the dialog box is way too large than the boxes on the others graphs. Below some screenshots so you can observe the difference.
Noramal size:
The large one:
Of course the graphs have the same height and width.
For exporting the graphs, I'm using:
import * as Highcharts from 'highcharts';
import exporting from 'highcharts/modules/exporting';
import exportingData from 'highcharts/modules/export-data';
exporting(Highcharts);
exportingData(Highcharts);
The configuration of all graphs has the same structure like below:
this.chartOptionsAvg = {
colors: ['#0026ff', '#ff0000', '#000000', '#229e00'],
chart: {
type: "scatter",
zoomType: 'x'
},
title: {
enabled: true,
text: '',
verticalAlign: 'top',
align: 'center'
},
xAxis: {
type: 'datetime',
title: {
text: this.translate.instant('map.time')
},
dateTimeLabelFormats: {
minute: '%H:%M',
hour: '%H:%M',
month: '%d/%m/%Y',
year: '%Y'
}
},
yAxis: {
title: {
text: this.translate.instant('map.graph-measurements-title-yaxis')
},
type: 'logarithmic',
minorTickInterval: 0.1,
},
credits: {
enabled: false
},
tooltip: {
valueSuffix: " V/m",
pointFormat: '<b>{point.x:%d/%m/%Y %H:%M}</b> </br> <b>{point.y}</b>',
dateTimeLabelFormats: {
minute: '%H:%M',
hour: '%H:%M',
month: '%d/%m/%Y',
year: '%Y'
}
},
plotOptions: {
series: {
marker: {
radius: 2
}
},
scatter: {
threshold: this.wb_threshold
}
},
legend: {
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6
},
exporting: {
enabled: true,
},
series: [
{
name: '100 KHz - 7 GHz',
data: avg_data1
},
{
name: '925 MHz - 960 MHz',
data: avg_data2
},
{
name: '1805 MHz - 1880 MHz',
data: avg_data3
},
{
name: '2110 MHz - 2170 MHz',
data: avg_data4
}
]
}
Have you any idea what is going wrong? Or, there is any way to style the box so I can change the font size maybe? Thank you.

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 area chart curves to sharp

I just started using highcharts and I would like for my chart to display as something like the first image below, instead of the second image.
What I'd Like
What I have
Here is the code for what I have currently:
chart = new Highcharts.stockChart($('#' + tab + ' .chart')[0], {
chart: {
type: 'areaspline',
spacing: [10, 10, 15, 10],
events: {
load: function() {
setTimeout(function() {
interval = setInterval(function() {
requestData(asset, name)
}, 1000);
}, 1000);
}
},
},
rangeSelector: {
enabled: !1
},
navigator: {
enabled: false
},
title: {
text: name
},
xAxis: {
type: 'datetime',
tickPixelInterval: 100,
dateTimeLabelFormats: {
second: "%H:%M:%S",
minute: "%H:%M",
hour: "%H:%M",
day: "%d/%m",
week: "%Y<br/>%d-%m",
month: "%m-%Y",
year: "%Y"
}
//tickPixelInterval: 3600
},
yAxis: {
allowDecimals: true,
title: {
text: 'Values'
},
labels: {
style: {
backgroundColor: "#282828"
},
y: 12,
zIndex: 4,
formatter: function() {
return Highcharts.numberFormat(this.value, countDecimals(this.value))
}
},
opposite: false,
plotLines: [{
value: 0,
width: 1,
dashStyle: 'longdashdot',
color: '#2D2E2F'
}]
},
series: [{
name: 'Price',
dataGrouping: {
enabled: !1,
groupPixelWidth: 1
},
animation: !1,
threshold: null,
//color: '#2D2E2F',
data: []
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
},
yAxis: {
labels: {
align: 'left',
x: 0,
y: -5
},
title: {
text: null
}
},
subtitle: {
text: null
},
credits: {
enabled: false
}
}
}]
}
});
PS: The data from both charts are almost the same.
Thanks.

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.