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

Question

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 1

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.