Tooltip for line segments in charts - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

Tooltip for line segments in charts

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){// ww w .j a v a  2s .  c om
function h1(name, bins, vals, errs) {
  series = [];
  var nbins = bins.length - 1;
  var errs_ok = Array.isArray(errs) && (errs.length == nbins);
  for (var i = 0; i < nbins; ++i) {
    var bin = {
      'type': 'line',
      'name': name,
      'data': [
        [bins[i], vals[i]],
        [bins[i + 1], vals[i]]
      ],
      tooltip: {
         pointFormat: false
      }
    };
    bin[i == 0 ? 'id' : 'linkedTo'] = name;
    series.push(bin);
    if (!errs_ok) continue;
    var x = (bins[i] + bins[i + 1]) / 2;
    var y = [vals[i] - errs[i], vals[i] + errs[i]];
    var err = {
      'type': 'line',
      'name': name,
      'linkedTo': name,
      'data': [
        [x, y[0]],
        [x, y[1]]
      ]
    };
    series.push(err);
  }
  return series;
}
Highcharts.chart('container', {
  plotOptions: {
    line: {
      color: '#000099',
      lineWidth: 2,
      marker: {
        enabled: false,
        states: {
          hover: {
            enabled: false
          }
        }
      },
    }
  },
  tooltip: {
    crosshairs: true
  },
  series: h1('test', [0, 1, 5, 10, 20], [100, 50, 30, 7], [5, 5, 5, 8])
});
    }

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px"></div>  
   </body>
</html>

Related Tutorials