Develop Reference

Not Working : Highcharts bar plotOptions series className

I want to apply style to the bar
But this code does not working
Please help!
plotOptions.series.className <<=== not working
https://api.highcharts.com/highcharts/plotOptions.series.className
//css
._chart_bar {
border-radius: 3px;
width: 8px;
}
//js
Highcharts.chart(containerId, {
chart: {
type: 'bar',
spacingBottom: 0,
spacingTop: 0,
spacingLeft: 20,
spacingRight: 20,
height: 150,
},
title: {
text: '',
},
xAxis: {
categories,
labels: {
useHTML: true,
formatter: xAxisFormatter,
},
lineWidth: 0,
},
yAxis: {
min: 0,
title: {
text: '',
},
labels: {
enabled: false,
},
gridLineWidth: 0,
},
legend: {
enabled: false,
},
exporting: {
// 상단 우측 context 메뉴 없애기
buttons: {
contextButton: {
enabled: false,
},
},
},
plotOptions: {
series: {
stacking: 'percent',
className: '_chart_bar', <=============== here is not working
color: barColor,
},
},
series: seriesValues,
credits: {
enabled: false,
},
}, () => {});
}, [categories, seriesValues, barColor]);

The className property works correctly - you can see that your CSS class is added to a series group element correctly.
To style the columns, you need to use .highcharts-point CSS class or the custom one, added by className property for points.
Live demo: http://jsfiddle.net/BlackLabel/4xz2rwfp/
API Reference: https://api.highcharts.com/highcharts/series.column.data.className

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 tooltip shows label from another serie

I have multiple series in a chart! This series are added according to user needs.
The tooltip tool shows the label of a series even though my mouse is closer to another series.
here is an image showing the problem:
https://i.imgur.com/eXeVtH7.png
Highcharts.chart('container', {
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime'
},
tooltip: {
snap: 2,
shared: true
}
yAxis: yAxis,
navigator: {
adaptToUpdatedData: false,
enabled: true,
series: {
type: 'areaspline',
fillOpacity: 0.5,
dataGrouping: {
enabled: false
}
}
},
chart: {
type: 'spline'
},
legend: {
enabled: false
},
plotOptions: {
series: {
showInNavigator: true,
stickyTracking: false
},
spline: {
marker: {
enabled: false
}
}
},
series: dataFrame
});

How to position axis label in highcharts

I have the attached chart output.
How can I put the name of the axis exactly on the axis instead of positioning it between the axis (ie: N, E, S, W).
The JS code is given below:
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container2',
polar: true,
type: 'column'
},
title: {
text: '24-Hours Wind Speed and Direction Chart'
},
pane: {
startAngle: 0,
endAngle: 360,
size: '85%'
},
legend: {
reversed: true,
enabled: false,
align: 'right',
verticalAlign: 'top',
y: 100,
layout: 'vertical'
},
xAxis: {
type: "",
categories: sorted_names,
labels: {
formatter: function () {
return this.value + '°';
}
}
},
yAxis: {
min: 0,
endOnTick: true,
showLastLabel: false
},
plotOptions: {
series: {
// pointStart: 0,
// pointInterval: 90
// pointPlacement: 'between'
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: series
});
Is there anyone who can help me to fix this. Thanks in advance.

I believe you are looking for a combination of the tickMarkPlacement option and the pointPlacement option.
xAxis: {
tickmarkPlacement: 'on', // add this!
type: "",
categories: sorted_names,
labels: {
formatter: function () {
return this.value + '°';
}
}
},
And in the plot options:
plotOptions: {
series: {
pointPlacement: 'on' // add this !
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
Here's a fiddle demonstration.

Build a dashboard with Highcharts

I want to build a lightweight dashboard with Highcharts. First, look at this graphic http://jsfiddle.net/jerryvermanen/Zr7zE/.
I want to make a dashboard with this visualization. When clicking on a point, I want to display additional information below the visualisation. For instance, I want to show a picture (.jpg), some more information about this point and a URL to the specific source.
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
exporting: {
enabled: false
},
chart: {
renderTo: 'container',
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'DAYS BETWEEN RELEASE AND CEREMONY',
style: {
fontSize: '22px'
}
},
subtitle: {
text: ''
},
xAxis: {
min: 0,
reversed: true,
title: {
enabled: true,
text: 'Days difference'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true,
plotLines: [{
color: 'black',
dashStyle: 'longdashdot',
width: 1,
value: 365,
label: {
text: 'ONE YEAR',
y: 580,
rotation: 0,
textAlign: 'left',
}
}]
},
yAxis: {
min: 1929,
max: 2012,
title: {
text: 'Year'
},
labels: {
formatter: function() {
return this.value;
}
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
'In<b>'+this.y +'</b>this movie was released<br/><b>'+ this.x +'</b>days from the ceremony.';
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
scatter: {
marker: {
radius: 4,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
},
series: [{
name: 'Nominees',
marker: {
symbol: 'circle'
},
Can anyone help me out with this project?

You can bind a click event to the point using the following code.
plotOptions: {
scatter: {
point: {
events: {
click: function() {
// do what you want
// you can get the point reference using `this`
}
}
}
}
}
demo