passatgt passatgt - 1 month ago 23
CSS Question

How to set padding on jQuery Flot graph to fix styling issue?

I'm using a jQuery Flot to create a simple graph. I don't need to display the axis on either side and because of that, the points are slightly cutted off. Any idea how can i fix this?

$.plot('#'+id, [
{ data: data.values, color: 'rgba(57,132,176,1)', shadowSize: 0 },
],{
series: {
lines: { show: true },
points: { show: true }
},
xaxis: {
show: false
},
yaxis: {
show: false
},
grid: {
show: false
}
});


Demo: http://jsfiddle.net/s00pjn8b/

Answer

You can add a margin to your grid option, like so:

$.plot('#'+id, [
    { data: data.values, color: 'rgba(57,132,176,1)', shadowSize: 0 },
],{
    series: {
        lines: { show: true, color: '#000000' },
        points: { show: true }
    },
    xaxis: {
         show: false
    },
    yaxis: {
         show: false
    },
    grid: {
        show: false,
        margin: 10
    }
});

Updated Fiddle here.