treemap legends for specific legend - Javascript highcharts

Javascript examples for highcharts:Chart Legend

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

Description

treemap legends for specific legend

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Treemap legend</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  w w  .  j  ava2 s.c  o  m
   width: 300px;
   width: 600px;
   margin: 0 auto;
}


      </style> 
      <script type="text/javascript">
$(function() {
    var H = Highcharts;
    H.addEvent(H.Legend, 'afterGetAllItems', function(e) {
        e.allItems.splice(1, 1)
    });
    $('#container').highcharts({
        'chart': {
            type: 'treemap'
        },
        series: [{
            data: [{
                'name': 'Americas',
                'value': 52976,
                'color': 'rgba(47,126,216,1)'
            }, {
                'name': 'Australia',
                'value': 41219,
                'color': 'rgba(13,35,58,1)'
            }, {
                'name': 'Europe',
                'value': 62756,
                'color': 'rgba(139,188,33,1)'
            }, {
                'name': 'Asia',
                'value': 14577,
                'color': 'rgba(145,0,0,1)'
            }],
            legendType: 'point',
            showInLegend: true
        }]
    });
});

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

Related Tutorials