Highcharts: how to select column (crosshairs) on mouseover xAxis labels

Question

How I can select column (crosshairs) on mouseover xAxis labels?

I can mouseover label, but don't know how to select column.

$(document).on('mouseover', '.highcharts-axis:eq(' + (axisCount - 1) + ') text, .highcharts-axis-labels:eq(' + (axisCount - 1) + ') text', function () {
    console.log('mouseover');
    // hover current column - crosshairs
});

http://jsfiddle.net/o355e82b/3/ (image how it should be - inside)

I think you'll need to explain much more precisely what you mean by "select column (crosshairs)". I am not understanding at all what your desired result is, and the fiddle did not help clarify. — jlbriggs, May 28 '15 at 18:47

score -1 · Answer 1 · answered May 29 '15 at 10:24

You can wrap crosshairs function and modify height of plotted element.

(function (HC) {
    HC.wrap(HC.Axis.prototype, 'drawCrosshair', function (proceed, e, point) {

        var path,
        options = this.crosshair,
            animation = options.animation,
            pos,
            attribs,
            categorized;

        if (
        // Disabled in options
        !this.crosshair ||
        // Snap
        ((defined(point) || !HC.pick(this.crosshair.snap, true)) === false)) {
            this.hideCrosshair();

        } else {

            // Get the path
            if (!HC.pick(options.snap, true)) {
                pos = (this.horiz ? e.chartX - this.pos : this.len - e.chartY + this.pos);
            } else if (defined(point)) {
                pos = this.isXAxis ? point.plotX : this.len - point.plotY; // #3834
            }

            if (this.isRadial) {
                path = this.getPlotLinePath(this.isXAxis ? point.x : pick(point.stackY, point.y)) || null; // #3189
            } else {
                path = this.getPlotLinePath(null, null, null, null, pos) || null; // #3189
            }

            if (path === null) {
                this.hideCrosshair();
                return;
            }

            // Draw the cross
            if (this.cross) {    
                //overwrite a height
                path[5] = point.series.chart.containerHeight;

                this.cross.attr({
                    visibility: VISIBLE
                })[animation ? 'animate' : 'attr']({
                    d: path
                }, animation);
            } else {
                categorized = this.categories && !this.isRadial;
                attribs = {
                    'stroke-width': options.width || (categorized ? this.transA : 1),
                    stroke: options.color || (categorized ? 'rgba(155,200,255,0.2)' : '#C0C0C0'),
                    zIndex: options.zIndex || 2
                };
                if (options.dashStyle) {
                    attribs.dashstyle = options.dashStyle;
                }

                this.cross = this.chart.renderer.path(path).attr(attribs).add();
            }

        }

    });

})(Highcharts);

Example: http://jsfiddle.net/o355e82b/5/

Extremely laggy that is not even usable – codenamezero Jul 22 '20 at 14:37 — codenamezero, Jul 22 '20 at 14:37

Highcharts: how to select column (crosshairs) on mouseover xAxis labels

1 Answers1