include data from point in xAxis label - Javascript highcharts

Javascript examples for highcharts:Chart Label

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Label

Description

include data from point in xAxis label

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <script src="https://code.highcharts.com/modules/export-data.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
      <script type="text/javascript">
$.getJSON(//  w  ww .  j a  v  a 2  s  .  c  o  m
  'https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json',
  function(data) {
    data.length = 100
    var seriesData = data.map(p => {
      return {
        x: p[0],
        y: p[1],
        magicValue: Math.round(Math.random() * 100)
      }
    })
    Highcharts.chart('container', {
      xAxis: {
        type: 'datetime',
        labels: {
          formatter() {
            var points = this.chart.userOptions.series[0].data
            var sameTimestampPoint = points.filter(p => p.x === this.value)[0]
            var magicValue = sameTimestampPoint ? sameTimestampPoint.magicValue : ""
                  return magicValue + '<br/>' + this.value
          }
        }
      },
      series: [{
        type: 'line',
        name: 'USD to EUR',
        keys: ['x', 'y', 'magicValue'],
        data: seriesData
      }]
    });
  }
);

      </script>  
   </body>
</html>

Related Tutorials