flot - How to control the outer margin on Flot graph

Question

I am having some difficulties figuring out how to control the outer margin on the Flot graph I have implemented. I have tried many options; minBorderMargin, margin, axisMargin, labelMargin. Neither, set individually or all together, didn't change a thing.

Want I want to achieve is complete control over the width of the right margin.

As you will see in this example, there's a margin to the right, even with minBorderMargin set to 0 (zero).

Here's 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 left align first tick label and right align last tick label?

Answer 1

如果您找不到更改绘图的方法，您可以考虑将占位符 div 放在另一个将溢出设置为隐藏的 div 中。然后，您可以通过控制外部 div 的大小或内部 div 的位置来“切断”任何一侧的额外边距。