Adding A Horizontal Marker To A Column Chart For A Secondary Measure
Horizontal Marker With Drop-Line
Horizontal Marker Without Drop-Line
First change the chart to a line chart and enable markers. Turn it back to a column chart and proceed to add the code.
Note:
The second measure becomes the affected item. If you want to affect the 3rd item change series[1] to series[2], and if you want to affect the 4th item change it to series[3] and so on.
Horizontal Marker With Drop-Line
widget.on('render', function(sender, se) {
var s = sender.queryResult.series[1];
// Define a custom symbol path
Highcharts.SVGRenderer.prototype.symbols.rect = function(x, y, w, h) {
return [
'M', x, y + h / 2,
'L', x + w, y + h / 2,
'M', x + w / 2, y + h / 2,
'L', x + w / 2, $('rect.highcharts-plot-background', element).height(),
'z'
];
};
if (Highcharts.VMLRenderer) {
Highcharts.VMLRenderer.prototype.symbols.rect = Highcharts.SVGRenderer.prototype.symbols.rect;
}
// Change series to a line, enable the marker and hide the line
s.type = "line";
s.lineWidth = 0.01;
s.marker = {
symbol: 'rect',
lineColor: null,
radius: 8,
lineWidth: 2
};
// When hovered state to disabled and lineWidth to 0
sender.queryResult.plotOptions.series.states.hover.lineWidth = 0;
sender.queryResult.plotOptions.series.states.hover.lineWidthPlus = 0;
// Change the hover fillColor
sender.queryResult.plotOptions.series.marker.states.hover.fillColor = 'white';
})Horizontal Marker Without Drop-Line
widget.on('render', function(sender, se){
var s = sender.queryResult.series[1];
// Define a custom symbol path
Highcharts.SVGRenderer.prototype.symbols.rect = function (x, y, w, h) {
return [
'M', x, y+h/2,
'L', x+w, y+h/2,
'z'];
};
if (Highcharts.VMLRenderer) {
Highcharts.VMLRenderer.prototype.symbols.rect = Highcharts.SVGRenderer.prototype.symbols.rect;
}
// Change series to a line, enable the marker and hide the line
s.type = "line";
s.lineWidth = 0.01;
s.marker = {
symbol: 'rect',
lineColor: null,
radius: 8,
lineWidth: 2
};
// When hovered state to disabled and lineWidth to 0
sender.queryResult.plotOptions.series.states.hover.lineWidth = 0;
sender.queryResult.plotOptions.series.states.hover.lineWidthPlus = 0;
// Change the hover fillColor
sender.queryResult.plotOptions.series.marker.states.hover.fillColor = 'white';
})Updated 03-02-2023
