cancel
Showing results for 
Search instead for 
Did you mean: 
intapiuser
Community Team Member
Community Team Member
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';
 
})
Rate this article:
Version history
Last update:
‎03-02-2023 09:18 AM
Updated by:
Contributors