I have no idea how I can change the circle size.

In my chart, the circle is very small.

I want a bigger circle than it is currently.

code ex :

 plot2 = jQuery.jqplot('PieChart',[ ticks ,rs_money], 
{
     grid: {
            drawBorder: false, 
            drawGridlines: false,
            background: 'transparent',

            shadow:false
        },
        axesDefaults: {

        },
        seriesDefaults:{
            renderer:$.jqplot.PieRenderer,
            rendererOptions: {
                showDataLabels: true,
                startAngle: 180, 
                sliceMargin: 2

            }
        },

  legend: {  fontSize:'11px',show:true,location: 's', labels:ticks}
}

I have no idea how I can change the circle size.

In my chart, the circle is very small.

I want a bigger circle than it is currently.

code ex :

 plot2 = jQuery.jqplot('PieChart',[ ticks ,rs_money], 
{
     grid: {
            drawBorder: false, 
            drawGridlines: false,
            background: 'transparent',

            shadow:false
        },
        axesDefaults: {

        },
        seriesDefaults:{
            renderer:$.jqplot.PieRenderer,
            rendererOptions: {
                showDataLabels: true,
                startAngle: 180, 
                sliceMargin: 2

            }
        },

  legend: {  fontSize:'11px',show:true,location: 's', labels:ticks}
}

• javascript
• jquery
• jquery-mobile
• jqplot

Share Improve this question Follow edited Oct 22, 2014 at 9:03 Emmanuel 14.2k1212 gold badges5353 silver badges7373 bronze badges asked Aug 7, 2012 at 9:24 손지현손지현 2111 silver badge33 bronze badges 1

• I have the same question - have you reached any solution yet? – FastTrack Commented Aug 23, 2012 at 20:51

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

I alter the size of the circle via CSS. The pie itself is set up to shrink or grow with the div, as long as it isn't too small. Try styling the div with width and height to see if that is what you're looking for.

<div id="pieChart" style="width:50%;height:50%;"></div>

You can also go into the jqplot.pieRenderer.js and look for

this.diameter=null;this.padding=20;

The null value can be changed to any number you like to make the circle bigger. If you make it bigger than your div though, it will stretch out of the div's bounds. You can also change the padding to have the circle take up more space in the div.

Check out their documentation:

http://www.jqplot./docs/files/jqPlotOptions-txt.html

seriesDefaults: {
        rendererOptions: {
            diameter: <your value>, // diameter of pie, auto puted by default.

    table.jqplot-table-legend {
    table-layout: fixed;
}

td.jqplot-table-legend-label
{
   max-width:100px;
}

    seriesDefaults: {
            renderer: jQuery.jqplot.PieRenderer,
            rendererOptions: {
              padding: 10
            }
    }

You can reduce the space by using padding option.By changing padding you can change the size of pie chart.