jqplot and legend option issue

Question

I have the following in my code. Having the option

 legend: {show:true}  

messes up the chart badly. The legend section is so long and there is no chart. I have pasted the image here of how the chart looks : http://tinypic.com/view.php?pic=2eqgbgy&s=7

It shows fine without the legend option though, but chart is of course without the legend.

In Chrome I see the following exception Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1

<script type="text/javascript"> 
        line2 = [['Living Expenses',1000], ['Loans',2000], ['Credit 
Card',500]]; 
    $j(document).ready(function() { 
        $j.jqplot.config.enablePlugins = true; 
        $j.jqplot('piechartdiv', [line2], { 
            title: 'Where is my money going?', 
            seriesDefaults:{renderer:$j.jqplot.PieRenderer, 
rendererOptions:{sliceMargin:8}}, legend:{show:true} 
        }); 
}); 

</script> 

<div style="width: 450px;margin: 0px auto;"> 
    <div id='piechartdiv'></div> 
</div> 

Any help appreciated.

Answer 1

Are you using Bootstrap or some other CSS reset library?

If you go into firebug, and select the <table class="jqplot-table-legend" ...> element, you'll probably see that there is a width:100% default property set the table elements. You can fix it in your CSS layout:

#piechartdiv table.jqplot-table-legend {
    width:auto;
}

Answer 2

The only thing that seems weird to me is this:

$j.jqplot

Why are there some J's on your code?, besides that, everything seems to be fine, maybe try putting a location on the legend to see if that fix the issue, here is an example:

plot = $.jqplot('chart2', [arr], {
        grid: {
            drawBorder: true,
            drawGridlines: false,
            background: '#FFFFFF',
            shadow: true
        },
        seriesDefaults: {
            renderer: $.jqplot.PieRenderer,
            rendererOptions: {
                showDataLabels: true
            }
        },
        legend: {
            show: true,
            location: 'e'
        }
    });