Question

I’m running jqPlot and for some reason the color-coded squares that should show up inside the pie renderer’s legend are not appearing. I’m wondering if it has anything to do with the fact that I’m using twitter bootstrap? I’m not using any other css libraries.

        var plot1 = jQuery.jqplot('chartdiv', [graphData],
        {
            grid: {
                shadow: false, 
                background: '#FFFFFF',                                                                                          
            },
            seriesDefaults: {
                // Make this a pie chart.
                renderer: jQuery.jqplot.PieRenderer,
                rendererOptions: {
                    // Put data labels on the pie slices.
                    // By default, labels show the percentage of the slice.
                    showDataLabels: true,
                    padding: 20,
                    startAngle: 270 
                }
            },
            legend: {
                show: true,
                location: 'e',
                fontSize: 11,
                marginTop: 10,                                
            }
        });

Answer 1

Are you sure you are loading the CSS of the jqPlot correctly (i.e. the url/href is pointing into the right location)?

This is your code with jquery.jqplot.css loaded.

This is your code without the css.

This one is with both the jquery.jqplot.css and the bootstrap (downloaded without jQuery plugins and not linking the img folder that comes with the download). Here all appear correctly, thus you must double check the href of the jquery.jqplot.css.