Highcharts - How do I dynamically change Marker radius when zooming?

highcharts

Solution

I don't think this is possible in the current version of highcharts as it doesn't have an API to update the series options. However, it is possible in the v3Beta release.

The maths of the zooming needs some work, but I've got the basics working here: http://jsfiddle.net/Jrh2G/

events: {
    selection: function (event) {
        var extremesObject = event.xAxis[0],
         min = extremesObject.min,
         max = extremesObject.max;
        console.log(min + " " + max);
        // The maths needs some work to make the radius scale better with min/max.
        // Also, you should probabl take into account min/max y values as well.
        this.series[0].update({marker:{radius:10/(max-min)}});
}

Problem

I'm using Highcharts with series type of "scatter". I also have the x-axis zoom functionality enabled. Now it would be nice to adapt the Marker radius to the zoom level. Something like: ``` events: { selection: function(event) { var extremesObject = event.xAxis[0], min = extremesObject.min, max = extremesObject.max; this.series[0].marker.radius = (max - min)/5; } ``` } The last line `this.series[0]...` is the code I'm looking for. I tried this: ``` jQuery.each(this.series[1].data, function (i, point) { point.update({ marker: { radius: 10 / (max - min) } }); }); ``` But this gives me an error when used on redraw event. Here is an example: http://jsfiddle.net/dbX4F/2/

Original source