Search code examples
jqueryhtmlflot

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

Solution

  • 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/