Pie with legend

by Amit Sant

HTML

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

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

CSS

.name{
    width: 190px;
}
.value{
    width: 60px;
}

JavaScript

$("document").ready(
  function() {
    $('#container').highcharts({
      chart: {
        type: 'pie',
        height: 300,
        width: 400
      },
      credits: {
        enabled: false
      },
      colors: [
        '#5485BC', '#AA8C30', '#5C9384', '#981A37', '#FCB319', '#86A033', '#614931', '#00526F', '#594266', '#cb6828', '#aaaaab', '#a89375'
      ],
      title: {
        text: null
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          showInLegend: true,
          dataLabels: {
            enabled: true,
            distance: -30,
            formatter: function() {
              return this.percentage.toFixed(2) + '%';
            }
          }
        }
      },
      legend: {
        enabled: true,
        width: 200,
      },
      series: [{
        type: 'pie',
        dataLabels: {

        },
        data: [
          ['Domestic Equity', 38.5],
          ['International Equity', 26.85],
          ['Other', 15.70],
          ['Cash and Equivalents', 10.48],
          ['Fixed Income', 8.48]
        ]
      }]
    });
  });