add array in custom dataLabels formatter - Javascript highcharts

Javascript examples for highcharts:Chart Data

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

Description

add array in custom dataLabels formatter

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from  ww  w.  j ava 2  s .  c om
var indexArray = 0;
var plotHtml = '';
var dateArray = ["2017,11,07", "2017,11,08", "2017,11,09"];
var allVolumnData = [232304, 157844, 154908];
var ploatingPoint = [-0.435, -0.221, -0.156];
$(function() {
  $('#container').highcharts({
    title: {
      text: 'Frequency Rate'
    },
    chart: {
      events: {
        render: function() {
          indexArray = 0;
        }
      }
    },
    xAxis: {
      tickInterval: 1,
      minPadding: 0,
      maxPadding: 10,
      startOnTick: true,
      endOnTick: true,
      categories: dateArray
    },
    yAxis: [{
      lineWidth: 1,
      title: {
        text: 'Prices'
      }
    }, {
      lineWidth: 1,
      opposite: false,
      title: {
        text: 'Vibrations'
      },
    }],
    plotOptions: {
      line: {
        dataLabels: {
          enabled: true,
          useHTML: true,
          formatter: function() {
            plotHtml = '<div class="datalabel" style="position: relative;"><b>' + this.point.y + '</div><br/><div class="datalabelInside" style="position: absolute; top: 45px; color:#008000; "><b>' + allVolumnData[indexArray] + '</div>';
            indexArray++;
            return plotHtml;
          },
        },
        enableMouseTracking: true,
      }
    },
    tooltip: {
      backgroundColor: "rgba(255,255,255,1)",
      useHTML: true,
      formatter: function() {
        var s = '<span div="tooltip"><br/><b>' + this.x + '</b>';
        var chart = this.points[0].series.chart; 
        var categories = chart.xAxis[0].categories;
        var index = 0;
        while (this.x !== categories[index]) {
          index++;
        } 
        $.each(chart.series, function(i, series) {
          if (series.name == 'Volumn') {
            s += '<br/><p style="color:#008000"><b>' + series.name + ': ' +
              series.data[index].y + '</b></p>'; 
          } else {
            s += '<br/><b>' + series.name + ': ' +
              series.data[index].y + '</b>'; //use index to get the y value
          }
        });
        s += '</span>';
        return s;
      },
      shared: true
    },
    series: [{
      name: 'Plot price',
      data: ploatingPoint,
      yAxis: 1
    }, {
      name: 'Volumn',
      data: allVolumnData,
      yAxis: 1,
      visible: false
    }]
  });
});
    }

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials