jqPlot data point gets cut off

Question

I am trying to create a chart using jqPlot where it shows the data for each hour. This is working fine, but as you can see in the jsfiddle, it doesn't show the first and last data point correctly. It cuts some of the circle off.

I am using this code:

$(document).ready(function () {
    var line1 = [
        ['08:00', 4],
        ['09:00', 10],
        ['10:00', 2],
        ['11:00', 12],
        ['12:00', 5],
        ['13:00', 3],
        ['14:00', 40],
        ['15:00', 2],
        ['16:00', 20],
        ['17:00', 7]
    ];
    var plot1 = $.jqplot('chart1', [line1], {
        axes: {
            xaxis: {
                renderer: $.jqplot.DateAxisRenderer,
                tickOptions: {
                    formatString: '%H:%M'
                },
                tickInterval: '1 hour',
                min: '08:00',
                max: '17:00'
            },
            yaxis: {
                min: 0
            }
        },
        seriesColors: ["#996325"],
        seriesDefaults: {
            markerOptions: {
                show: true,
                style: 'circle', // circle, diamond, square, filledCircle. filledDiamond or filledSquare.
                color: 'white',
                lineWidth: 4,
                size: 12,
                shadow: true
            }
        },
        grid: {
            background: '#365463',
            gridLineColor: 'grey'
        }
    });

});

jsFiddle

What am I doing wrong ? :(

Answer 1

You can modify your min and max values of your xaxis in order to see the full circle of your first and last points.

xaxis:{
 min: '07:45',
 max: '17:15'
}

See example here