angularhighcharts

Display latest data as a pointer on axis in Highchart

I am using angular high charts. I wanted to know if we can add a pointer to the axis displaying the latest value of the series, like the one shown in the image below. I do have a shared tool-tip like the one in this example: 

tooltip: {
xDateFormat: '%d/%m/%Y',
shared: true,
split: false,
enabled: true},

http://jsfiddle.net/vkd76qx3/

I want to keep the tool-tip, but moreover even if i do not hover on any series, i still want to see the latest values stuck to the axis.

enter image description here

Solution

  • You can assign an annotaion to every last point and move them outside a plot area in render event:

    chart: {
  ...,
  events: {
    render: function() {
      this.annotations[0].labels.forEach(function(label) {
        label.graphic.attr({
          x: this.plotLeft + this.plotWidth
        });
      }, this);
    }
  }
},
annotations: [{
  labelOptions: {
    padding: 5,
    align: 'left',
    overflow: 'none',
    verticalAlign: 'middle',
    allowOverlap: true,
    text: '{point.y:.2f}',
    y: 0,
    x: 10
  },
  labels: [{
    point: 's1LastPoint'
  }, {
    point: 's2LastPoint'
  }, {
    point: 's3LastPoint'
  }]
}]

    Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4800/

    API Reference:

    https://api.highcharts.com/highcharts/chart.events.render

    https://api.highcharts.com/highcharts/annotations