Kappe Kappe - 1 year ago 168
Javascript Question

Click event on Highstock / Highchart plot

I'm trying to fire a function after a click on a bar in my chart (Highstock vertical bar chart), this is the documentation:


click: Function
Fires when clicking on the plot background. The this keyword refers to the chart object itself. One parameter, event, is passed to the function. This contains common event information based on jQuery or MooTools depending on which library is used as the base for Highcharts.

Information on the clicked spot can be found through event.xAxis and event.yAxis, which are arrays containing the axes of each dimension and each axis' value at the clicked spot. The primary axes are event.xAxis[0] and event.yAxis[0]. Remember the unit of a datetime axis is milliseconds since 1970-01-01 00:00:00.

click: function(e) {
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', e.xAxis[0].value),

this is my chart configuration:

plotOptions: {
series: {
animation: enableAnimation,
cursor: 'pointer',
point: {
events: {
click: function(event) {

the problem is that the 2th and 3th log() was never executed because the "event" object doesn't contain the yAxis or xAxis values, I have written a function for explore the object's properties:

function exploreObj(param, offset)
log("%% "+param);
for (var property in param)

log(offset + property+": "+param[property]);

any suggestion? how I can access the values for the clicked bar?

Answer Source

Solved using this approach:

var start_t = 0;
                        var end_t = 0;

                        var point = event.point;
                        var points = event.point.series.points;
                        var index = points.indexOf(point);
                        var index_next = index+1;
                        start_t = point.x;
                            end_t = points[points.length - 1].x;
                            //Is not the last
                            var next_point = points[index_next]
                            end_t = next_point.x;

                        var period =
                            from: start_t,
                            to: end_t
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download