I am generating the following plot in Angular using this layout config:

{
        showlegend: false,
        plot_bgcolor: 'rgb(20, 20, 20)',
        paper_bgcolor: 'rgb(20, 20, 20)',
        xaxis:
        {
            fixedrange: true,
            type: "category",
        },
        yaxis:
        {
            min: 0,
            tickfont:
            {
                color: null
            },
            fixedrange: true
        },
        yaxis2:
        {
            min: 0,
            fixedrange: true,
            tickfont:
            {
                color: 'white'
            },
            overlaying: 'y',
            side: 'right'
        },
        // font:
        // {
        //     color: "white",
        //     size: 10
        // },
        height: "300",
        margin:
        {
            t: 30,
            r: 30,
            b: 30,
            l: 30
        },
        shapes: []
    }

I am wondering what could be causing this sort of misalignment? Any advice is welcome.