Shell Test

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function() {

  Highcharts.setOptions({ // Change colours
    colors: ['#FAD331', '#96D5DF', '#1BA8BB', '#C5D930', '#C1A0C5']
  });

  // Create the chart
  chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'pie'
    },
    title: {
      text: 'Something'
    },
    yAxis: {
      title: {
        text: 'Total percent market share'
      }
    },
    plotOptions: {
      pie: {
        shadow: false
      }
    },
    tooltip: {
      formatter: function() {
        return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
      }
    },
    series: [{
      name: 'Browsers',
      data: [{
        name: 'Fuel',
        y: 7450.00
      }, {
        name: 'Lubricants',
        y: 435.00
      }, {
        name: 'Road Services',
        y: 300.87
      }, {
        name: 'Food',
        y: 45.67
      }, {
        name: 'Shop',
        y: 42.45
      }],
      size: '60%',
      innerSize: '85%',
      showInLegend: true,
      dataLabels: {
        enabled: false
      },
      legend: {
        enabled: true,
        floating: true,
        align: 'left',
        layout: 'vertical',
        verticalAlign: 'top',
        y: 80,
        labelFormat: '<span style="color:{color}">{name}</span>: <b>{point.y:.2f} USD</b> ({point.change:.2f}%)<br/>',
        borderWidth: 0
      },
    }]
  });
});