Highcharts Demo

author(s): Faisal Khan

by Faisal Khan Janjua

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="linesStatus" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

CSS

.highcharts-legend a {
    color: #999;
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
}

JavaScript

var pieData = [{"name":"Active","y":13,"url":"http://10.50.81.157/jazz/manage/index/lines/#Active","color":"#99CF1C"},{"name":"Suspended","y":0,"url":"http://10.50.81.157/jazz/manage/index/lines/#Suspended","color":"#FDAB0A"},{"name":"Blocked","y":1,"url":"http://10.50.81.157/jazz/manage/index/lines/#Blocked","color":"#B90011"},{"name":"terminated","y":1,"url":"http://10.50.81.157/jazz/manage/index/lines/#Terminated"}];

jQuery('#linesStatus').highcharts({
  chart: {
    type: 'pie',
    backgroundColor: "transparent",
    marginBottom: 50
  },
  plotOptions: {
    pie: {
      innerSize: '80%',
      allowPointSelect: true,
      cursor: 'pointer',
      // colors: chartColors,
      borderWidth: 0,
      startAngle: 40,
      dataLabels: {
        enabled: false,
      },
      showInLegend: true,
      states: {
        hover: {
          brightness: 0,
          duration: 10,
          halo: {
            opacity: 1,
            size: 10
          }
        }
      }
    },
    title: {
      text: ' '
    },
    series: {
      cursor: 'pointer',
      point: {
        events: {
          click: function () {
            location.href = this.options.url;
          }
        }
      }
    }
  },
  legend: {
    y: 0,
    x: 0,
    padding: 0,
    enabled: true,
    useHTML: true,
    floating: true,
    itemDistance: 8,
    //itemWidth: 80,

    symbolPadding: 0,
    symbolWidth: 16,
    align: 'left',
    layout: 'horizontal',
    labelFormatter: function () {
      return '<a href="'+this.options.url+'"class="getLegendPosition pieLegends">' + this.name + '</a>';
    }
  },
  tooltip: {
    backgroundColor: "transparent",
    borderWidth: 0,
    borderColor: 'transparent',
    headerFormat: '<table class="chartToolTip">',
    pointFormat: '<tr><td style="color:grey;text-align:center"><b>{point.name} <br/> {point.y:,.0f}</b></td></tr>',
    footerFormat: '</table>',
    valueDecimals: 2,
    borderRadius: 0,
    shadow: false,
    useHTML: true,
   ...