How to set xaxis range to months like (jan, feb to dec) in plotly.js?

Question

So, I want to set x-axis range from January to December. so x_data and y_data are dynamic for example x_data = [ 'Jan', 'Feb] and y_data = [10, 20]. So the graph shows me only two value at x-axis(jan and feb only) but I want all the months at x-axis if the data is not available . I have tried to set the range of xaxis to ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] but it is not working. (code below)

var trace1 = {
        x: x_data,
        y: y_data,
        type: 'bar',
        marker: {
            color: '#FEDB41',
        }
    };
    var data = [trace1];

    var layout = {
        xaxis: {
            type : 'category',
            categoryorder : "array",
            categoryarray : MONTHS,
            zeroline: false,
            showline: false,
            tickfont : {
                size : 10,
                color : 'white'
            },
            // type: 'date',
            automargin: true,
            tickformat: '%d, %b',
            range:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        "yaxis": {
            "visible": false,
            "showgrid": false,
            "zeroline": false
            },
        // barmode: 'group',
        margin: {
            l: 2,
            r: 2,
            b: 20,
            t: 2,
        },

        paper_bgcolor: 'rgba(0,0,0,0)',
        plot_bgcolor: 'rgba(0,0,0,0)',
    };

    Plotly.newPlot(div_id, data, layout, {displayModeBar: false}); 

Answer 1

var trace1 = {
        x:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        y: [10,20,30,40,0,0,0,0,0,0,0,0],
        type: 'bar',
        marker: {
            color: '#FEDB41',
        }
    };
    var data = [trace1];

    var layout = {
        xaxis: {
            type : 'category',
            categoryorder : "array",
            zeroline: false,
            showline: true,
            tickfont : {
                size : 10,
                color : 'black'
            },
            // type: 'date',
            automargin: true,
            autorange:false,
            tickformat: '%d, %b'
        },
        "yaxis": {
            "visible": false,
            "showgrid": false,
            "zeroline": false
            },
        // barmode: 'group',
        margin: {
            l: 2,
            r: 2,
            b: 20,
            t: 2,
        },

        paper_bgcolor: 'rgba(0,0,0,0)',
        plot_bgcolor: 'rgba(0,0,0,0)',
    };

    Plotly.newPlot("chart", data, layout, {displayModeBar: false});

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart"></div>

Range is available for type number and date. It is not available for string. You could just append values which are not available to 0. Hope this helps to some extent.