highstock crosshair width according to zoom

Question

I have a highstock chart witch candlestick data type. When I mouseover the data point, I want to highlight the background of the point. This is what tooltip -> crosshairs do:

tooltip: {
    crosshairs: true
}

But the only width option to set is the fixed width. See http://jsfiddle.net/8YBd7/. This fixed width works with initial zoom, but when I change the zoom, the width is not updated with new point width.

When I set 100% width, the crosshair would fill entire chart area:

tooltip: {
    crosshairs: {
        width: '100%'
    }
}

Is there another option how to highlight current data point by changing its background or setting the width to the pointPixelInterval or something else?

Answer 1

Meanwhile, I produced a dirty workaround, so improvements are welcomed:

    xAxis: {
            events: {
                afterSetExtremes: function() {
                    this.chart.tooltip.crosshairs = [];
                    this.chart.options.tooltip.crosshairs.width = (this.width / (this.series[0].points.length-1));
                }
            }
        }

http://jsfiddle.net/QbdEu/1/

Whenever the zoom is changed, the width is recounted according to chart width and number of displayed data points. The width is not updated when calling redraw(), so the old crosshair needs to be removed.

Answer 2

Have you tried to use Renderer http://api.highcharts.com/highstock#Renderer.rect() which allows to plot any shapes and defined width? Only what you need is getting point width in pixels frpm(chart.series[0].data[0].graphic) and then setting correct widht of "shape".