Flot: Make Ticks Line Up For All Y Axis

I have a flot graph that in addition to the first Y axis, uses secondary Y axis with a different number scale. My problem is that the secondary scale labels does not line up with

Solution 1:

Use the alignTicksWithAxis option to align the ticks on axis 2 with the ticks on axis 1:

        "yaxes" : [ {
            "position" : "left",
            "min" : 0,
            "max" : 15
        }, {
            "position" : "right",
            "min" : 0,
            "max" : 75,
            "alignTicksWithAxis" : 1
        } ],

See the Documentation for more information (at the end of the "Customizing the axes" chapter).

$(function() {
    flotOptions = {

        "xaxis" : {
            "min" : 20,
            "max" : 63,

        },
        "yaxes" : [ {
            "position" : "left",
            "min" : 0,
            "max" : 15
        }, {
            "position" : "right",
            "min" : 0,
            "max" : 75,
            "alignTicksWithAxis" : 1

        } ],
        "colors" : [ "#EAA433", "#32A2FA"],

    };

    flotData = [
            {
                "data" : [ [ 20.61, 12.52 ], [ 27.82, 12.35 ], [ 35.04, 11.89 ], [ 42.25, 11.19 ], [ 49.47, 10.28 ], [ 56.68, 9.176 ], [ 62.09, 8.246 ], [ 61.84, 8.289 ] ],
                "yaxis" : 1
            },
            {
                "data" : [ [ 20.61, 59.37 ], [ 27.82, 66.57 ], [ 35.04, 70.58 ], [ 42.25, 71.79 ], [ 49.47, 70.59 ], [ 56.68, 67.36 ], [ 62.09, 63.83 ], [ 61.84, 64.00 ] ],
                "yaxis" : 2,
            },
            {
                "data" : [ [ 20.61, 20.61 ], [ 28.85, 28.85 ], [ 37.10, 37.10 ],  [ 45.34, 45.34 ],[ 53.59, 53.59 ],  [ 61.83, 61.83 ] ],

            } ];

    var plot = $.plot($("#placeholder"), flotData, flotOptions);
});

<script src="http://www.flotcharts.org/flot/jquery.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>

<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>