jqPlot Legend overflow div

Question

I use jqPlot 1.0.0b2_r1012. I try to draw pie chart and I can draw successfuly. However Legend overflow from div. I explain my code and attach screen shot in below.

I use this function draw pie chart:

function drawjQPlot(div, data) {

        var plot1 = jQuery.jqplot(div, [data],
{
    seriesDefaults: {
        renderer: jQuery.jqplot.PieRenderer,
        rendererOptions: {
            showDataLabels: true
        }
    },
    legend: { show: true, location: 's', placement: 'outside',
        rendererOptions: {
            numberColumns: '2'
        }
    }
}

); }

Html structure like this:

<fieldset>
    <legend>Test</legend>
    <table>
        <tr>
            <td>
                <div id="chart1">
                </div>
            </td>
            <td>
                <div id="chart2">
                </div>
            </td>
            <td>
                <div id="chart3">
                </div>
            </td>
        </tr>
    </table>
</fieldset>

Screen shot:

enter image description here

How can fix this problem?

Thank you.

score 2 · Answer 1 · answered Sep 30 '13 at 21:09

2

If I understand correctly, you want the legend to appear inside the container of your chart.
change placement: 'outside' to placement: 'insideGrid' in your legend properties.

Hope that helps

Ref: jqPlot Charts configuration

answered Sep 30 '13 at 21:09

Jace

21
2

The problem with the options 'outsideGrid' and 'insideGrid is, that they change the height of the graph if the heights of the legends differ as is the case in the question. This solves the overflow problem, but looks strange. – esel Dec 10 '15 at 13:20

score 1 · Answer 2 · answered Dec 10 '15 at 14:38

I had the same problem with jqPlot version 1.0.8 using placement : 'outside'. I wanted to use the plots in a bootstrap grid and had potentially very long legends that overlapped the next row. I was not able to find a clean solution that uses only the right arguments and nothing else. But the following piece of code, called after creating the plot, solves the problem for me.

This code removes the chart's legend, contained in an HTML table element, from the chart's div and places it in a wrapper div (for centering) next to (i. e. under) the chart's div:

var chartElement = $("#" + chartElementId);
var legendTable = chartElement.find("table.jqplot-table-legend");
legendTable.css("position", "static"); // removes absolute positioning
legendTable.css("margin", "0 auto"); // centers table inside wrapper div
var legendWrapper = $(document.createElement("div"));
legendTable.appendTo(legendWrapper);
legendWrapper.appendTo(chartElement.parent());

jqPlot Legend overflow div

2 Answers2