Constrain to x value using High Charts addPoint()

Question

I was reading a bit about the high charts addPoint() function here:

http://api.highcharts.com/highcharts#Series.addPoint()

I'm quite taken the idea of creating a chart like this one:

http://www.highcharts.com/demo/dynamic-click-to-add

...but where I have a fixed x and y scale, and where the user can only place a point on the scale in multiple of 5.. such as a point at x=10 and y=20...

Has this been attempted, and/or is it feasible given the options provided in the API?

Thanks

j0nes j0nes · Accepted Answer · 2012-09-18T11:55:07

You can modify this behavior in your click handler - you get the exact click values there, and you can simply round it to the next interval you like:

            events: {
                click: function(e) {
                    // find the clicked values and the series
                    var x = e.xAxis[0].value,
                        y = e.yAxis[0].value,
                        series = this.series[0];

                    // round given click point to intervals
                    x = Math.ceil(x / 5) * 5;
                    y = Math.ceil(y / 5) * 5;

                    // Add it
                    series.addPoint([x, y]);

                }
            }

The Demo of this example will give you a starting point.

Constrain to x value using High Charts addPoint()

1 Answers