Highcharts Demo

author(s): Torstein Hønsi

by fekkyDev s

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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>

JavaScript

$(document).ready(function() {
  //
  //
  // Build the chart
  Highcharts.chart('container', {
    chart: {
      backgroundColor: {
        linearGradient: [0, 0, 0, 400],
        stops: [
          [0, 'rgb(96, 96, 96)'],
          [1, 'rgb(16, 16, 16)']
        ]
      },
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
      type: 'pie',

    },
    title: {
      text: 'Browser market shares January, 2015 to May, 2015'
    },
    tooltip: {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
      pie: {
        size: 200,
        innerSize: 100,
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: false
        },
        showInLegend: true
      }
    },



    legend: {
      align: 'right',
      verticalAlign: 'top',
      layout: 'vertical',
      x: -50,
      y: 120,
      symbolPadding: 0,
      symbolWidth: 0.1,
      symbolHeight: 0.1,
      symbolRadius: 0,
      useHTML: true,
      symbolWidth: 0,
      labelFormatter: function() {
        if(this.name=="Microsoft Internet Explorer"){
        	 return '<div style="width:200px;"><span style="float:left; margin-left:10px"><img src = "http://cdn.onlinewebfonts.com/svg/img_508736.svg" width = "40px" height = "40px" style="background-color:' + this.color + ';"></span><span style="float:right;padding:9px">' + this.percentage.toFixed(2) + " " + this.y + '%</span></div>';
        }
       if(this.name=="Chrome"){
       return '<div style="width:200px;"><span style="float:left; margin-left:10px"><img src = "http://cdn.onlinewebfonts.com/svg/img_159842.svg" width = "40px" height = "40px" style="background-color:' + this.color + ';"></span><span style="float:right;padding:9px">' + this.percentage.toFixed(2) + " " + this.y + '%</span></div>';
       }
       if(this.name=="Firefox"){
       return '<div style="width:200px;"><span style="float:left; margin-left:10px"><img src =...