score:1

Accepted answer

tl;dr

here's a live demo - http://jsfiddle.net/vu96fr9h/2/


first thing, your series does not contain data. for this example, i initialized it with the following:

series: [{
  name: 'average',
  data: [{
    id: "point-1",
    x: 1,
    y: 49.9
  }, {

    id: "point-2",
    x: 2,
    y: 71.5
  }, {

...

next, you can set up a click event on a point by extending your chartconfig object like so:

options: {
      plotoptions: {
        series: {
          cursor: 'pointer',
          point: {
            events: {
              click: function(e) {
                var point = {
                  x: this.x,
                  y: this.y,
                  id: this.id
                }

                $scope.$apply(function() {
                  $scope.selectedpoint = point;
                });
              }
            }
          },
          marker: {
            linewidth: 1
          }
        }
      },

      ...

the click will store the point metadata in $scope.selectedpoint. you can add a $scope.$watch to get a notification when it changes:

$scope.$watch('selectedpoint', function(newvalue) {

    // here you can fetch more info about this point from the server 
    console.log(newvalue);

});

the view will display what you want based on $scope.selectedpoint. it may be a secondary graph or plain metadata as text.

enter image description here


Related Query

More Query from same tag