Use icon in legend - Javascript highcharts

Javascript examples for highcharts:Chart Legend

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

Description

Use icon in legend

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-1.9.1.js"></script> 
      <script type="text/javascript">
$(function() {// w w w  .ja v  a 2  s  .co m
  function drawTicks() {
    const {
      translateX: tx,
      translateY: ty
    } = this.legend.group;
    this.series[0].points.forEach(p => {
      let img = p.img;
      if (!img) {
        p.img = img = this.renderer.image('https://www.java2s.com/style/demo/Google-Chrome.png', -9999, 0, 15, 15).attr({
          zIndex: 10
        }).add();
      }
      const bbox = p.legendSymbol.getBBox();
      const x = p.legendGroup.translateX + tx;
      const y = p.legendGroup.translateY + ty;
      img.attr({
        x: x,
        y: y
      });
    });
  }
  $(document).ready(function() {
    // Build the chart
    $('#container').highcharts({
      chart: {
        events: {
          load: drawTicks,
          redraw: drawTicks
        }
      },
      legend: {
        symbolRadius: 0
      },
      title: {
        text: 'Browser market shares at a specific website, 2014'
      },
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: false
          },
          showInLegend: true
        }
      },
      series: [{
        type: 'pie',
        name: 'Browser share',
        point: {
          events: {
            legendItemClick: function() {
              this.img.attr({
                visibility: !this.visible ? 'visibile' : 'hidden'
              });
            }
          }
        },
        data: [
          ['Firefox', 45.0],
          ['IE', 26.8], {
            name: 'Chrome',
            y: 12.8,
            sliced: true,
            selected: true
          },
          ['Safari', 8.5],
          ['Opera', 6.2],
          ['Others', 0.7]
        ]
      }]
    });
  });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials