The problem is that when I plot a graph, the last x-axis label isn't shown on the axis (even though the value is plotted correctly).
I think I've narrowed it down to the 'minTickSize' value being 1 day, but I need it to be 1 day so I'm not sure how to get around that. I've put it in 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);
The last label would be centered at the edge of the chart and therefore extend outside the container div.
The simplest workaround is to set the max value for the x axis to a larger value so that the label can be safely placed 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 could specify the ticks manually:
xaxis: {
mode: "time",
timeformat: "%d/%m/%y",
ticks: [1430780400000, 1430866800000, 1430953200000],
tickColor: 'transparent',
},
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.