Plotly Line Chart - points joint in wrong sequence

Question

When using Pivottable.js with Plotly Line Chart, the points were connected with vertical line. By right it should connected with horizontal line.

Codes to reproduce

<div id="output" style="overflow:scroll;width:100%"></div>
<script>
    var numberFormat = $.pivotUtilities.numberFormat;
    var floatFormat = numberFormat({digitsAfterDecimal: 1});
    var tpl = $.pivotUtilities.aggregatorTemplates; 
    var derivers = $.pivotUtilities.derivers;
    var renderers = $.extend($.pivotUtilities.renderers,
        $.pivotUtilities.plotly_renderers);   
    
    
    var months = ['2000-01','2000-01',  '2000-02', '2000-03', '2000-04', '2000-05', '2000-06', '2000-07', '2000-08', '2000-09', '2000-10', '2000-11', '2000-12', '2001-01', '2001-01'];
    var scores = [-6.5, -30.0, -26.6, -43.6, -52.3, -71.5, -81.4, -80.5, -82.2, -76, -67.3, -46.1, -35, -30, -10];
    var objs =[];
    var i = 0;
    for (m of months) {
        var obj = {};
        obj['month'] = m;
        obj['score'] = scores[i];
        obj['user'] = 'Joe';
        objs.push(obj);
        i++;
    }
    
    $('#output').pivotUI(
        objs,
            {
            renderers: renderers,
            showUI: false,
                rows: ['user'],
                cols: ['month'],
                rendererName: 'Line Chart',
                rowOrder: 'value_a_to_z', 
                colOrder: 'value_a_to_z',
            aggregators: {
                    "Score": function() { return tpl.sum(floatFormat)(['score']) }
             }, 
                rendererOptions: {
                    plotly: { 
                            xaxis: {
                                tickmode: "linear", 
                                tick0: '1999-12-15',
                                dtick: 30 * 24 * 60 * 60 * 1000 // milliseconds 
                            }
                         
                    }
                }               
            }
    );
</script>

Expected behavior

Actual behavior

Environment

• Pivottable v2.23.0
• Plotly Basic v1.53.0
• jQuery v3.4.1
• Opera Browser v70.0:

Answer 1

The problem is likely in rowOrder and colOrder you're setting here... Plotly plots the data in the order given, and here it looks like you're sorting the data by Y-value :)