HighCharts - Pie Chart

by Akram kamal

HTML

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

<div id="container" style="width: 300px; height: 300px; margin: 0 auto; border:1px solid black;"></div>

JavaScript

var chart;
$(document).ready(function() {
    
/* PIE CHART THEME */
Highcharts.theme = {
   /* LINE/BAR/COLUMN/SLICE COLORS - only used for slices for Plex, if we add multiple data sets in future releases, these colors will work with the rendering of other sets */
   colors: ['#395C9B', '#923532', '#7B972E', '#6A538D', '#3B83A1', '#CB7221', '#F2E200'],
    
   /* CHART TITLE */
   title: {
      style: {
         color: '#000',
         font: 'bold 16px "Lucida Grande", Helvetica, Arial, sans-serif'
      }
   },

   /* CHART SUBTITLE */
   subtitle: {
      style: {
         color: '#666666',
         font: 'bold 12px "Lucida Grande", Helvetica, Arial, sans-serif'
      }
   },
    
   /* CHART X-AXIS */
   xAxis: {
      lineColor: '#000',
      tickColor: '#000',
      labels: {
         style: {
            color: '#000',
            font: '11px "Lucida Grande", Helvetica, Arial, sans-serif'
         }
      },
      title: {
         style: {
            color: '#333',
            font: 'bold 12px "Lucida Grande", Helvetica, Arial, sans-serif'
         }
      }
   },
    
   /* CHART Y-AXIS */
   yAxis: {
      minorTickInterval: 'false', /* OPTIONAL PARAMETER - SHOWS HORIZONTAL LINES in between tick values */
      lineColor: '#000',
      lineWidth: 1,
      tickWidth: 1,
      tickColor: '#000',
      labels: {
         style: {
            color: '#000',
            font: '11px "Lucida Grande", Helvetica, Arial, sans-serif'
         }
      },
      title: {
         style: {
            color: '#333',
            font: 'bold 12px "Lucida Grande", Helvetica, Arial, sans-serif'
         }
      }
   },
    
   /* LINE CHART COLORS */
   plotOptions: {
       line: {
           lineWidth: 3,
           shadow: false,
           marker: {
                fillColor: '#fff', /* LINE POINT COLOR */
                lineWidth: 2,
                radius: 4,
                symbol: 'circle', /* "circle", "square", "diamond", "triangle" and "triangle-down" */
   ...