CODEWITHSUNDEEP
javascriptflot
resting
resting

Reputation: 17467

How to reduce this spacing between flot graph and its div container?

How do I remove this empty space as shown in the below screenshot (green line)?

The js code is as below:

$(function() {

    var d = [];
    var t = 1377655220 * 1000;
    for (var i=0;i<6;i++) {
        d.push([t+(i*60*1000), i*2]);
    }

    var data = [{
      label: "Packets",
      data: d
    }];
    var options = {
      colors: ['#F7A500'],
      legend: {
        labelBoxBorderColor: '#fff',
        backgroundOpacity:0
      },
      series: {
        lines: {
          show:true,
          lineWidth:3,
          fill:true
        },
        points: {
          show:true,
          fill: true,
          fillColor: '#F7A500'
        }
      },
      xaxis: {
        mode: 'time',
          tickSize: [1,'minute'],
        timeformat: "%m/%d <br> %H:%M"
      },
      yaxis: {
        tickSize: 2
      },
      grid: {
        borderWidth: 1,
        color: '#aaa',
        autoHighlight: true,
        mouseActiveRadius: 3,
        labelMargin: 15
      }
    };
    var plot = $('#placeholder').plot(data, options);
});

HTML:

<div id="placeholder" style="width:800px;height:300px;border:1px solid red;"></div>

Jsfiddle: http://jsfiddle.net/resting/hx6UJ/3/

Flot graph

Upvotes: 2

Views: 1278

Answers (1)

DNS
DNS

Reputation: 38189

If you're using 0.8, you can try the new grid 'margin' option:

grid: {
    margin: {
        right: 0
    }
}

It might not remove the margin entirely, but it will get you most of the way there.

Upvotes: 1

Related Questions