CODEWITHSUNDEEP
javascriptchartshighcharts
Btz
Btz

Reputation: 339

Can the crosshair in a Highcharts chart set and be moved programmatically?

I am working on a web application displaying multiple charts over the same categories. If you want an example, think population for different cities over time. The charts all have crosshairs enabled for the X axis.

I've been asked if, when a user hovers over a chart and moves the mouse - therefore moving the crosshairs - it is possible to have the crosshairs of all the other charts as well, in parallel, kinda mirroring the movement.

Off the top of my head it should not be impossible - capture the position on the X axis whenever the mouse is moved, then set/move the crosshairs on all charts to the same value for all the other charts - but that would work only if moving crosshairs programmatically is possible.

Is this possible in a non trivial way?

Edit: I created a partially working version on jsfiddle, based on the jsfiddle linked to in the answer, and replicating the two column layout of the charts in our web app: http://jsfiddle.net/basiliosz/sgc8jg34/

The crosshairs are moved only in charts directly above and below the one where the user is hovering the mouse cursor, but not in the other column. This is the crucial code snippet from the event handler:

for (i = 0; i < noOfCharts; i = i + 1) {
    chart = separateCharts[i]
    event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
    point = chart.series[0].searchPoint(event, true); // Get the hovered point
    if (point) {
        point.highlight(event);
    }
}

where Point.prototype.highlight is defined as this:

Highcharts.Point.prototype.highlight = function (ev) {
    this.onMouseOver(); // Show the hover marker
    this.series.chart.tooltip.refresh(this); // Show the tooltip
    this.series.chart.xAxis[0].drawCrosshair(ev, this); // Show the crosshair
};

Upvotes: 0

Views: 2703

Answers (1)

morganfree
morganfree

Reputation: 12472

There is an internal function for drawing crosshair which can be used (it is not part of the official API)

/**
 * Draw the crosshair
 * 
 * @param  {Object} e The event arguments from the modified pointer event
 * @param  {Object} point The Point object
 */
 Axis.prototype.drawCrosshair: function(e, point) {}

example: http://jsfiddle.net/6rbhxmrp/

You can also the official demo with synchronizing charts https://www.highcharts.com/demo/synchronized-charts

The example with a disabled tooltip: http://jsfiddle.net/vwm4oe6k/

Upvotes: 1

Related Questions