Highcharts Demo

author(s): Torstein Hønsi

by Nhi Nguyen

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 300px; margin-top: 2em"></div>

JavaScript

$(function () {
    Highcharts.chart('container', {

      title: {
        text: 'Extra data in points'
      },
      yAxis: {
        title: {
            text: ''
        },
        categories: ['Missing', 'Clear', 'Notice','Caution','Warning'],
        /* reversed: true */
    },
        
      tooltip: {
        formatter: function() {
          return 'Values:<b>'+this.point.y + '</b>'+'<br>' +'Extra data: <b>' + this.point.myData + '</b>';
        }
      },

      series: [ {
        name: 'Foo',
      
        data: [
        
          {
          	x: 0,
            y : 1,
            myData : 'firstPoint',
            
         
          },
          {
          	x: 1,
            y : 1,
            myData : ''
          },
          {
          x: 1,
            y : 4,
            myData : 'firstPoint',
         
          },
          {
          x: 2,
            y : 4,
            myData : 'secondPoint'
          },
          {
          x:2,
            y : 0,
            myData : 'thirdPoint'
          },
          {
          x:3,
            y : 0,
            myData : 'fourthPoint'
          }
       ],
       zoneAxis:'x',
        zones: [{
            value: 1,
            color: 'green'
        }, {
            value: 2,
            color: 'yellow'
        }, {
            color: 'red'
        }]
    }]
  });
});