JQuery Flot Time missing last x-axis label
The problem is that when I draw the graph, the last X-axis label is not shown on the axis (even though the value is plotted correctly).
I think I narrowed it down to a minTickSize of 1 day, but I need it to be 1 day, so I'm not sure how to get around this. I posted this on a jsfiddle here: http://jsfiddle.net/s7x5ef0p/1/
JS:
function plotGraph(graphData){
var graphData = [{
data: graphData.sort(),
color: '#FFF'
}];
$.plot($('#graph'), graphData, {
series: {
points: {
show: true,
radius: 5
},
lines: {
show: true
},
shadowSize: 3
},
grid: {
color: '#FFF',
borderColor: 'transparent',
borderWidth: 20,
hoverable: true
},
xaxis: {
mode: "time",
timeformat: "%d/%m/%y",
minTickSize: [1,"day"],
tickColor: 'transparent'
},
yaxis: {
tickSize: 1
}
});
}
var graphData = [[1430953200000,107],[1430953200000,107], [1430953200000,107],[1430953200000,107],[1430953200000,107]
,[1430953200000,107],[1430866800000,107],[1430780400000,107]];
plotGraph(graphData);
+3
source to share
1 answer
The last label will be centered on the edge of the chart and therefore will extend outside the container div.
The simplest workaround is to set the maximum value for the x-axis to a higher value so that the label can be safely positioned inside the chart and container.
xaxis: {
mode: "time",
timeformat: "%d/%m/%y",
minTickSize: [1,"day"],
tickColor: 'transparent',
max: 1430957400000 // max value from your data + 2 hours
},
Alternatively, you can specify checkboxes manually:
xaxis: {
mode: "time",
timeformat: "%d/%m/%y",
ticks: [1430780400000, 1430866800000, 1430953200000],
tickColor: 'transparent',
},
0
source to share