CODEWITHSUNDEEP
jqueryhtmlflot
Blake
Blake

Reputation: 1077

How do I add space between legend items in FLOT?

I have the below graph and I want to add space between legend items. I have tried appending spaces to the string passed to the label with no success. Any ideas? TIA

Graph code

       $(document).ready(function() {
            $.plot($("#NR"), NRLine,  {
                grid: {
                    backgroundColor: "#E5E5E5",
                    hoverable: true
                },
                xaxis: {
                    mode: "time",
                    timeformat: "%m/%d",
                    minTickSize: [7, "day"],
                    ticks: datearray


                        },
                        legend: {


                        noColumns: 4,
                        container: $("#chartLegend")} 


    }
     );
        });

code

Upvotes: 2

Views: 2396

Answers (3)

Mark
Mark

Reputation: 108567

@Ryley's answer is good. If you want a little more control over each label you can put HTML mark-up in the label itself:

label: '<span style="padding-right:60px;">foo</span>'

Upvotes: 1

Ryley
Ryley

Reputation: 21226

The legend labels are in containers with the class legendLabel, so you just have to define CSS for what you want. Put this in your page <head> tag:

<style>
  #chartLegend .legendLabel { padding-right:10px; }​
</style>

This is what it would look like: http://jsfiddle.net/ryleyb/SZUuV/1/

Upvotes: 5

Justin Pihony
Justin Pihony

Reputation: 67115

Could you provide a snippet of your code? It looks to me like this might be the solution that you need. Use the labelFormatter to force the setup the way that you need it.

Upvotes: 0

Related Questions