chart shows very small pie

Question

I have a problem with highcharts pie, i want to show my data into a pie, but the pie is very small, it is only shows like a small dot.

i have looking for the answer any where, but i can not find it. Please some body explain to me why is that, i just new for this tools...

i tried to post the image, but it can't...

below are my code :

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index,archive,follow">
<title>CIT Dashboard</title>
<link rel="stylesheet" media="all" href="css/dashboard.css"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript">     
    var chart1;
    var chart2;
    $(document).ready(function() {
            chart1 = new Highcharts.Chart({
            chart: {
                renderTo: 'pie1',   
                plotBackgroundColor: '#969696',
                margin: 0,
                padding: 0
            },
            legend: {
                enabled: false
            },
            title: {
                text: ''
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) +' %';
                }
            },
            plotOptions: {
                pie: {
                    size:'80%',
                    allowPointSelect: true,                 
                    plotBorderWidth: 0,
                    plotShadow: false,              
                    animation: false,
                    shadow: false,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor:'#000000',
                        distance: -40,
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b><br />'+ this.percentage.toFixed(2) +' %';
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Transaction by LTS',
                data: [<%=graph1 %>]
            }]
        });


        chart2 = new Highcharts.Chart({
            chart: {
                renderTo: 'pie2',   
                plotBackgroundColor: '#969696',
                margin: 0,
                padding: 0
            },
            legend: {
                enabled: false
            },
            title: {
                text: '',
                margin: 0
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) +' %';
                }
            },
            plotOptions: {
                pie: {
                    size:'80%',
                    allowPointSelect: true,                 
                    plotBorderWidth: 0,
                    plotShadow: false,              
                    animation: false,
                    shadow: false,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        distance: -40,
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b><br />'+ this.percentage.toFixed(2) +' %';
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Transaction by LTS',
                data: [<%=graph2 %>]
            }]
        });
    });

</script>
</head>

Thanks

Answer 1

First of all, define your width / height, secondly you can modify size of chart by parameter:

http://api.highcharts.com/highcharts#plotOptions.pie.size