include strings in series data to pull for tooltip point formatting? - Javascript highcharts

Javascript examples for highcharts:Chart Tooltip

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

Description

include strings in series data to pull for tooltip point formatting?

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="https://code.jquery.com/jquery-2.1.0.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//from   ww  w.  j  av  a 2 s  .com
$(function () {
    $('#graph1').highcharts({
      credits: { enabled:false},
        chart: {
            type: 'column'
        },
        title: {
            text: 'Most Recent Test Scores'
        },
      subtitle: {
            text: 'Drag slider to change the chart width'
        },
        xAxis: {
          categories: ['Joe', 'Bob', 'Steve']
        },
        yAxis: {
         plotLines: [{
            color: 'red',
            dashStyle: 'shortdash',
            value: 85,
            width: 1,
         }],
          floor: 0,
            ceiling: 100,
            title: {
                text: 'Test Score (%)'
            }
        },
        series: [{
         showInLegend: false,
         name: 'Test Score',
            data: [{y:7, color: '#00A6CF', testdate: '2014-12-12'},{y:2, color:"#FF0000", testdate: '2015-01-03'}, {y:3,color:"#00FF00", testdate:'2014-10-19'}],
      tooltip: {
         shared: true,
         useHTML: true,
         pointFormat: '<tr><td style="color: {series.color}">Score: </td>' +
                '<td style="text-align: right">{point.y} %</td></tr><tr><br><td>Date: </td>' +
                '<td style="text-align: right">{point.testdate}</td></tr>'
      }
        }]
    });
$('#width').bind('input', function () {
        $('#graph1').highcharts().setSize(this.value, 400, false);
    });
});
    });

      </script> 
   </head> 
   <body> 
      <div id="graph1" style="height: 400px; width:600px"></div> 
      <input id="width" type="range" value="600" min="300" max="600"> 
      <script src="https://code.highcharts.com/highcharts.js"></script>  
   </body>
</html>

Related Tutorials