How to control the external field on the fleet chart

Question

I am having some difficulty figuring out how to control the outer edge on the Flot that I performed. I have tried many options; minBorderMargin, margin, axisMargin, labelMargin. None of them were installed individually or all together, did not change anything.

I would like to get full control over the width of the right margin.

As you will see in this example , there is a field on the right, even if minBorderMargin is set to 0 (zero).

Here is the source code:

var $wrapper = $('<div />').addClass('wrapper'), $graph = $('.graph'), data = { color: '#dba400', hoverable: true, data: [ // [1, 215000], // [2, 205000], // [3, 0], // [4, 70000], [35, 270000], [36, 105000], [37, 60000], [38, 0], [39, 110000] ] }, options = { xaxis: { color: '#f0f0f0', min: 34.5, max: 39.5, tickColor: 'transparent', tickFormatter: function(val) { return 'RND' + val; } }, yaxis: { color: '#f0f0f0', tickColor: null, tickFormatter: function(val) { var units = ['', 'K', 'M'], unit = units.shift(); while (val > 1000 && units.length > 0) { val /= 1000; unit = units.shift(); } return val + unit; } }, grid: { borderWidth: 0, minBorderMargin: 0 }, hooks: { processOffset: function(plot, offset) { console.log(plot, offset); } }, series: { points: { radius: 0, lineWidth: 0 } } }; $graph.append($wrapper); $.plot($wrapper, [data], options);​ 

Bonus question: is there an easy way to align the first label of the label and align the labels of the last tick on the right edge?

Answer 1

If you cannot find a way to change the plot, you might consider placing a div placeholder in another div that has overflow set to hidden. You can then chop off the extra edge from either side by controlling the size of the outer div or the placement of the inner.