Draw crosshair on specific xAxis point

[kfir124]

Hi I am using the annotations module which is cool and all but I want each annotation to draw crosshair on the xaxis point which it is attached to.

I didn't see any option to do it from the annotation module so I looked around and there is an example in sync charts on how to draw a cross hair it goes like:

Code: Select all

chart.xAxis[0].drawCrosshair(event, point)

my problem is that I don't have any event nor any point, I saw that point is a pretty complex structure I just want to pass

Code: Select all

chart.xAxis[0].drawCrosshair(NULL, chart.series[0].xData[30])

for example.

Just give an X coordinate(number) and thats it (my X axis is normally just time).

I would prefer to have an opption on annotation to just draw a cross hair like:

Code: Select all

        this.chart.addAnnotation({
            id: 'anno2',
            labelOptions: {
                // borderRadius: 5,
                shape: 'circle',
                DRAW_CROSSHAIR_X_AXIS: TRUE,
                backgroundColor: 'rgba(252, 255, 197, 0.7)',
                 borderColor: '#AAA',
                // padding: 10
            },
            labels: [{
                point: { x: this.chart.series[0].xData[30], y: 0, xAxis: 0},
                text: '3dsdas',
            }]
        });

(notice the draw crosshair option)

[rafalS]

Hi, kfir124!

You can simply write your own custom crosshairs using Highcharts SVG Renderer tool. Here you have an example of how to code crosshair in point.events.mouseOver on 1 series: http://jsfiddle.net/BlackLabel/dfy1j2rv/

And it's really easy to adapt this code so crosshairs are displayed on specific points.

Let me know if you will have any problems with implementing this - I will try to help.

https://api.highcharts.com/class-refere ... derer#path
https://api.highcharts.com/highcharts/s ... .mouseOver

Best regards!

[kfir124]

Hi, kfir124!

You can simply write your own custom crosshairs using Highcharts SVG Renderer tool. Here you have an example of how to code crosshair in point.events.mouseOver on 1 series: http://jsfiddle.net/BlackLabel/dfy1j2rv/

And it's really easy to adapt this code so crosshairs are displayed on specific points.

Let me know if you will have any problems with implementing this - I will try to help.

https://api.highcharts.com/class-refere ... derer#path
https://api.highcharts.com/highcharts/s ... .mouseOver

Best regards!

Thanks rafaIS, thanks for the quick reply, this is pretty good, my charts are real-time so I add more points each few seconds, I guess I would need to destroy all crosshairs and redraw them each time?

Also I see you are using plotX and plotY but in my case I just know the X coordinate where I want to put the crosshair, (for example I know I want crosshair on X where the value of X equals to 1542196793000) I don't really know the X,Y location plot wise, only the data of the X point itself, how should I adjust the code in such a case? (also I don't use any mouse events I just draw the crosshair after the chart finished drawing data)

[rafalS]

kfir124,

plotX is x coordinate of the point. If you want to draw a crosshair on specific X coordinate, you should e. g find a point on that coordinate and use its plotX.

Here you have a little bit different example. I push every new crosshair to crosshairArr array, then every 2 seconds I destroy them and empty this array. Every third added point has property crosshair: true: http://jsfiddle.net/BlackLabel/ja0vtek1/

Kind regards.