Heatmap Legend settings - Javascript highcharts

Javascript examples for highcharts:Chart Legend

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

Description

Heatmap Legend settings

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Treemap Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <style id="compiled-css" type="text/css">

#container {//from   w  ww .java2 s. co m
   min-width: 300px;
   max-width: 600px;
   margin: 0 auto;
}


      </style> 
      <script type="text/javascript">
$(function () {
   var data = [{
      name: 'Cash CHF',
      value: 1.5
   }, {
      name: 'LISN',
      value: 4
   }, {
      name: 'BBRY',
      value: 4
   },{
      name: 'Cash GBP',
      value: 1.5
   }, {
      name: 'MSFT',
      value: 6
   }, {
      name: 'BBRY',
      value: 4
   }, {
      name: 'Cash ARS',
      value: 3
   }, {
      name: 'CSCN',
      value: 1
   }, {
      name: 'FUT OIL',
      value: 2
   }, {
      name: 'OPT Mining',
      value: 2
   }];
   for(var i=0; i<data.length; i++){
      data[i].sortIndex = i;
      data[i].colorValue = i+1;
   }
    var test = $('#container').highcharts({
            credits: false,
            title: false,
        legend: {},
        series: [{
            type: 'treemap',
            layoutAlgorithm: 'squarified',
            data: data
        }],
        legend:{
        //...
        },
         colorAxis: {
            minColor: '#A3D9FF',
            maxColor: '#FF5460',
                  labels: {
        formatter: function() {
          if (this.isFirst) {
             return 'low ' +this.value;
          } else if (this.isLast) {
                return '  '+ this.value + 'high ';
          } else {
            return this.value;
          }
        }
      }
        }
    });
    console.log( $('#container').highcharts() );
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/heatmap.js"></script> 
      <script src="https://code.highcharts.com/modules/treemap.js"></script> 
      <div id="container"></div>  
   </body>
</html>

Related Tutorials