Question

I’ve created a basic Flot chart, but the labels are so large they cover the entire chart. Can anyone guide me? I’ve looked on the flot documentation but I can’t see an option that I’ve set that would have caused this.

To be clear, what I mean is that I get a small coloured square corresponding to the plot colour, then a lot of white space, then the label of the series, then loads more white space.

Here’s how I’m creating the charts:

        var d1 = [[0,5],[24, 5]];    
    var d2 = [[0,4],[64, 4]];
    var d3 = [[0,3],[2, 3]];
    var d4 = [[0,2],[49, 2]];       
    var d5 = [[0,1],[20, 1]];

var data1 = [
    {    
        label: "Product 1",
        data: d1,
        bars: {
            show: true,
            barWidth: 0.3,
            order: 5,
            fill: true,
            fillColor:  "#AA4643",
            horizontal : true

        }
    },
    {
        label: "Product 2",
        data: d2,
        bars: {
            show: true,
            barWidth: 0.3,
            order: 4,
            fill: true,
            fillColor:  "#89A54E",
            horizontal : true
        }
    },

    {
        label: "Product 3",
        data: d3,
        bars: {
            show: true,
            barWidth: 0.3,
            order: 3,
            fill: true,
            fillColor:  "#4572A7",
            horizontal : true
        }
    },
    {
        label: "Product 4",
        data: d4,
        bars: {
            show: true,
            barWidth: 0.3,
            order: 2,
            fill: true,
            fillColor:  "#80699B",
            horizontal : true
        }
    },
    {
        label: "Product 5",
        data: d5,
        bars: {
            show: true,
            barWidth: 0.3,
            order: 1,
            fill: true,
            fillColor:  "#11111B",
            horizontal : true
        }
    }
];


    jQuery.plot(jQuery("#myplaceholder"+1), data1, {colors: ["#AA4643", "#89A54E", "#4572A7", "#80699B", "#11111B"], yaxis: {show:false},
    xaxis: {     font: { size: 11, style: "italic", weight: "bold", family: "sans-serif", variant: "small-caps" }        },
    });

Thanks in advance! 🙂

Answer 1

By labels, I assume you mean the labels in the legend (i.e. Product 1).

The most likely cause is that you have CSS in your page that specifies some styles for something unrelated, and they are bleeding into the legend. Flot uses an html table with a structure like this to create the legend:

<div class="legend">
<div>
<table>
  <tr> 
    <!--This is the color box for each series, the divs are styled and colored to make it look pretty -->
    <td class="legendColorBox"><div><div></div></div></td>
  </tr>
  <tr>
    <td class="legendLabel">Product 1</td>
  </tr>
  <!-- repeated for each series -->
</table>
</div>
</div>

So if you have a CSS style somewhere either for all td elements or if you happened to have an existing CSS class for .legendLabel or .legend, that would certainly explain your issue.

If you look at this example, you’ll see that your code without any CSS does not have any issues: http://jsfiddle.net/ryleyb/AkqyC/