CODEWITHSUNDEEP
javascriptjquerycssjqplot
Dreamcatcher
Dreamcatcher

Reputation: 828

jqPlot Legend overflow div

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.

Upvotes: 4

Views: 2626

Answers (2)

esel
esel

Reputation: 983

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());

Upvotes: 1

Jace
Jace

Reputation: 21

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

Upvotes: 2

Related Questions