highcharts line chart with same x value, how to handle click events - highcharts

Question

I have a line chart that is used to show milestone events. So the xaxis is the date. If the data has more than one event on the same date, I offset the y value so that the point markers are stacked vertically. I don't want to make the y offset too big because that would make it hard to handle multiple markers on the same date. The markers also have a hover. Problem is that when I hover near a marker, only one marker's hover shows and I can only click on one marker.
See this jsfiddle with the label "Upgrade": http://jsfiddle.net/MichaelWitt/adun8km8/1/
You cannot click on this, but you can see the behavior on the hover as you cannot get the blue triangle to hover.
Highcharts.chart('container', {
"title": {
"text": null
},
"credits": {
"enabled": false
},
"chart": {
"zoomType": "x",
"type": "line",
"plotBackgroundImage": null,
"backgroundColor": "transparent",
"height": 330,
"borderWidth": 0,
"top": 0,
"marginTop": 0,
"marginBottom": 150,
"marginLeft": 120
},
"legend": {
"enabled": false,
"align": "left",
"verticalAlign": "top",
"layout": "vertical",
"x": 0,
"y": 0,
"useHTML": false,
"itemMarginTop": 4,
"itemHoverStyle": {
"color": "#3094d1",
"font": "Helvetica Neue, Helvetica, Arial, sans-serif",
"fontSize": "10px",
"fontWeight": "normal"
},
"itemStyle": {
"color": "#404b56",
"font": "Helvetica Neue, Helvetica, Arial, sans-serif",
"fontSize": "12px",
"fontWeight": "normal"
},
"itemHiddenStyle": {
"color": "#caced1",
"font": "Helvetica Neue, Helvetica, Arial, sans-serif",
"fontSize": "12px",
"fontWeight": "normal"
}
},
"xAxis": {
"type": "datetime",
"lineWidth": 0,
"lineColor": "#404b56",
"tickColor": "#404b56",
"tickInterval": 173520000,
"gridLineColor": "#222222",
"labels": {
"style": {
"font": "Helvetica Neue, Helvetica, Arial, sans-serif",
"fontSize": "10px",
"fontWeight": "bold",
"color": "#404b56",
"zIndex": -100
},
"format": "{value:%b %d, %Y}"
}
},
"yAxis": {
"labels": {
"enabled": true,
"style": {
"font": "Helvetica Neue, Helvetica, Arial, sans-serif",
"fontSize": "10px",
"fontWeight": "bold",
"color": "#404b56",
"zIndex": -100
},
"y": 3
},
"gridLineColor": "#dddddd",
"tickColor": "#dddddd",
"title": {
"text": null
},
"tickInterval": 1
},
"plotOptions": {
"series": {
"marker": {
"enabled": true,
"radius": 8,
"symbol": "triangle"
},
"cursor": "pointer",
"events": {},
"point": {
"stickyTracking": false
},
"states": {
"hover": {
"enabled": true,
"lineWidth": 0,
"lineWidthPlus": 0
}
}
},
"line": {
"lineWidth": 0,
"stickyTracking": false
}
},
"series": [{
"name": "Upgrade",
"data": [{
"x": 1510203600000,
"y": 0,
"name": "Upgrade",
"key": 158,
"shortDesc": "test",
"status": "Planned",
"marker": {
"symbol": "triangle",
"radius": 7,
"fillColor": "#3498db",
"states": {
"hover": {
"fillColor": "#3498db"
},
"select": {
"fillColor": "#3498db"
}
}
}
}, {
"x": 1510203600000,
"y": 0.25,
"name": "Upgrade",
"key": 159,
"shortDesc": "test",
"status": "Complete",
"marker": {
"symbol": "diamond",
"radius": 7,
"fillColor": "#2ecc71",
"states": {
"hover": {
"fillColor": "#2ecc71"
},
"select": {
"fillColor": "#2ecc71"
}
}
}
}],
"color": "#1abc9c",
"stickyTracking": false
}, {
"name": "Refresh",
"data": [{
"x": 1509336000000,
"y": 1,
"name": "Refresh",
"key": 160,
"shortDesc": "test",
"status": "Late",
"marker": {
"symbol": "square",
"radius": 7,
"fillColor": "#e74c3c",
"states": {
"hover": {
"fillColor": "#e74c3c"
},
"select": {
"fillColor": "#e74c3c"
}
}
}
}],
"color": "#036192",
"stickyTracking": false
}],
"tooltip": {
"followPointer": false,
"followTouchMove": false,
"shared": false,
"backgroundColor": {
"linearGradient": {
"x1": 0,
"y1": 0,
"x2": 0,
"y2": 1
},
"stops": [
[0, "rgba(96, 96, 96, .8)"],
[1, "rgba(16, 16, 16, .8)"]
]
},
"borderWidth": 0,
"style": {
"color": "#FFF"
}
}
}

Answer 1

Points in a line series, by default, are being tracked in x dimension. You can change that by setting series.findNearestPointBy option to 'xy'.
findNearestPointBy: String
Determines whether the series should look for the nearest point in both dimensions or just the x-dimension when hovering the series. Defaults to 'xy' for scatter series and 'x' for most other series. If the data has duplicate x-values, it is recommended to set this to 'xy' to allow hovering over all points.
"plotOptions": {
"series": {
"findNearestPointBy": "xy",
...
}
}
Live example: http://jsfiddle.net/120pm1m7/