This is an archived forum post. The information may be outdated. Contact us if you have any questions.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Highcharts Example</title> <!-- 1. Add these JavaScript inclusions in the head of your page --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://www.highcharts.com/js/2.1.2/highcharts.js"></script> <!-- 2. Add the JavaScript to initialize the chart on document ready --> <script type="text/javascript"> var chart; $(document).ready(function() { Highcharts.setOptions({ colors: ['#32A2D4', '#F47833', '#4EC342', '#D23389', '#377698', '#AA5D75', '#B79E6E', '#F1CD33'] }); chart = new Highcharts.Chart({ chart: { animation: false, renderTo: 'container', margin: [0, 0, 0, 0] }, title: { text: '' }, plotArea: { shadow: null, borderWidth: null, backgroundColor: null }, tooltip: { formatter: function() { return '<b>'+ this.point.name +'</b>: '+ this.y +' %'; } }, plotOptions: { pie: { animation:false, allowPointSelect: false, cursor: 'pointer', dataLabels: { enabled: false, formatter: function() { if (this.y > 5) return this.point.name; }, color: 'white', style: { font: '13px Trebuchet MS, Verdana, sans-serif' } } } }, legend: {enabled: false }, series: [{ type: 'pie', name: 'Vender share', data: [ ['Google', 45.0], ['MSN', 26.8], { name: 'Yahoo', y: 12.8, sliced: false }, ['Ask', 8.5], ['Looksmart', 6.9] ] }] }); }); </script> </head> <body> <!-- 3. Add the container --> <div id="container" style="width: 800px; height: 193px; margin: 0 auto"></div> </body> </html>