deploy data labels & tooltips for 2nd data series for bar chart - Javascript highcharts

Javascript examples for highcharts:Chart Tooltip

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

Description

deploy data labels & tooltips for 2nd data series for bar chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>SideBySideChart</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){// www.  j av a2s .com
$(function() {
  var options = {
    chart: {
      renderTo: 'adaRate',
      type: 'bar',
      width: 600,
      height: 400
    },
    title: {
      text: 'Average Daily Attendance Rate',
      align: 'center',
      style: {
        fontWeight: 'bold',
        color: 'rgba(0,0,0,.9)'
      }
    },
    legend: {
      enabled: true
    },
    xAxis: {
      labels: {
        style: {
          fontWeight: 'bold'
        }
      }
    },
    yAxis: [{
      min: 0,
      max: 100,
      opposite: true,
      width: 270,
      title: {
        text: 'Average Daily Attendance %'
      }
    }, {
      min: -10,
      max: 10,
      offset: 0,
      opposite: true,
      plotLines: [{
        color: 'red',
        value: 0,
        width: 2
      }],
      left: 400,
      width: 170,
      title: {
        text: 'Variance from Prior Year'
      }
    }],
    series: [{
      name: 'ADA',
      dataLabels: {
        enabled: true,
        align: 'right',
        color: '#FFFFFF',
        x: -10
      },
      yAxis: 0,
    }, {
      type: 'scatter',
      name: 'PY Variance',
      dataLabels: {
        enabled: true,
        align: 'center',
        color: '#000000',
        x: -10
      },
      yAxis: 1,
      tooltip: {
        pointFormat: '{point.y}'
      }
    }],
    credits: {
      enabled: false
    }
  };
  var categories = ["School 1", "School 2", "School 3", "School 4", "School 5", "School 6", "School 7"];
  var adaRate = [96.4, 95.9, 93.3, 92.3, 89.8, 85.4, 83.9];
  var adaVar = [{
    "color": "yellow",
    "y": -.8
  }, {
  "color": "red",
  "y": -3.5
  }, {
  "color": "lightgreen",
  "y": 1.5
  }, {
  "color": "lightgreen",
  "y": 2.3
  }, {
  "color": "red",
  "y": -4.3
  }, {
  "color": "green",
  "y": 5.3
  }, {
  "color": "darkgreen",
  "y": 7.8
  }
  ];
  options.xAxis.categories = categories;
  options.series[0].data = adaRate;
  options.series[1].data = adaVar;
  var chart = new Highcharts.Chart(options);
});
    }

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/highcharts-more.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
      <div id="adaRate"></div>  
   </body>
</html>

Related Tutorials