CODEWITHSUNDEEP
javascripthighcharts
Supertracer
Supertracer

Reputation: 472

Highchart Crosshair not touching x axis

I want to increase height of my xAxis crosshair to touch the x axis. Is there a way to achieve this. Below i have attached screen shot and code snippet for the same

Highcharts.chart(container, {
   title: {
     text: ""
    },
    xAxis: {
     type: "datetime",
     crosshair: true
    }
}

enter image description here

I tried using it as tooltip option

 tooltip: {
        crosshairs: {
            color: 'green',
            width:  2,
            height: 10

        }
    }

It takes width but does not take the height options

Js fiddle example

Upvotes: 3

Views: 1201

Answers (2)

ppotaczek
ppotaczek

Reputation: 39099

The length of the the crosshair is the same as xAxis height, so depending on the result you want to achieve set right xAxis height. Axis offset does not affect to the crosshair.

xAxis: {
    crosshair: true,
    height: 343, //  yAxis[1].top - yAxis[0].top + yAxis[1].height
    offset: -174
}

Live demo: http://jsfiddle.net/BlackLabel/w5c82ja9/

Upvotes: 1

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

Currently the crosshair goes to where the x-axis baseline is expected to be (not accounting for offset), as also described by Mike Zavarello in the comments.

One workaround from my understanding of your situation is to extend Highcharts and instead draw the crosshair from the maximum value of your first y-axis (the one nearest the top) to the bottom of your second y-axis (the one nearest the bottom).

For example (JSFiddle):

(function (H) {
    H.wrap(H.Axis.prototype, 'drawCrosshair', function (proceed, e, point) {
        let old_function = H.Axis.prototype.getPlotLinePath;
        H.Axis.prototype.getPlotLinePath = function (value, lineWidth, old, force, translatedValue) {
            // copy paste handling of x value and sane value threshold
            translatedValue = Math.min(Math.max(-1e5, translatedValue), 1e5);
            x1 = x2 = Math.round(translatedValue + this.transB);

            // max displayed value of your top y-axis
            y1 = this.chart.yAxis[0].toPixels(this.chart.yAxis[0].max);
            // min displayed value of your bottom y-axis
            y2 = this.chart.yAxis[1].toPixels(this.chart.yAxis[1].min);

            return this.chart.renderer.crispLine(
                ['M', x1, y1, 'L', x2, y2],
                lineWidth || 1
            );
        };
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
        H.Axis.prototype.getPlotLinePath = old_function;
    });
}(Highcharts));

Note that this approach is very much directly addressing your problem by extending Axis.drawCrosshair, and within that extension rewriting the Axis.getPlotLinePath function to alter the path given for the crosshair. It does also not address crosshairs along the y-axis. Still, this could probably be solved in a similar way. It should be thoroughly tested for artifacts.

Upvotes: 3

Related Questions